a11y audit: cookie banner zoom issues

[carylwyatt]

1728469 Heading and close button lose functionality when zoomed to 200% 1728474 Heading, content, and close button lose functionality with screen size is 320px wide

I missed adding this to the overall firebird fix list, and @giramesh pointed out that it was missing. I remember trying to reproduce this back in April when we first got the list, but I struggled to see the issue. I fixed a zoom/small screen issue with catalog and advanced search, so I'm hoping I can reproduce this and fix it quickly.

[carylwyatt]

200% zoom on ls search results page (trying to emulate the browser width from the ticket: buttons are stacked, heading is in-line with logo/close button). I cannot get the heading/button to get cut off like it is in their screenshot. They say they only tested in chrome, but I can't get it to do that in any browser! @giramesh can you try to reproduce issue 1728469? Thanks in advance!

chrome

firefox

safari

[carylwyatt]

Same issue with the 320px browser width. Unless their screen was very short this should not be an issue.

[carylwyatt]

@giramesh I have a thought, though: the cookie banner has a max-height: 34rem; but I could make it max-height: 80vh; which would mean it could never get taller than 80% of the height of the veiwport.

At 320px with the max-height set to 80vh, I would need to adjust some padding on things to make sure the buttons are usable, but maybe this is a solution to the zoom/320px width problem that I can't seem to recreate.