[Bug] Responsive Issues with Header and Navigation on Small Screens (max-width: 340px)

[wendy640]

Description

On screens with a maximum width of 340px, the header and navigation items do not display properly. The text appears too large, causing elements to overflow, and the menu button is not positioned optimally. This impacts usability, making the navigation difficult to use on smaller devices.

Reproduction

1. Access the Vocabulary project on a device with a screen width of 340px or smaller.
2. Observe the text sizes in the header and navigation.
3. Click the menu button and check its position and behavior.
4. See error.

Expectation

The header and navigation should be fully responsive on smaller screens. All text elements, including the navigation items, should adjust to a smaller size to fit the screen width. The menu button should be aligned properly, slightly moved to the left to improve accessibility.

Screenshots

Environment

• Device: (eg. iPhone Xs; laptop)
• OS: (eg. iOS 13.5; Fedora 32)
• Browser: (eg. Safari; Firefox)
• Version: (eg. 13; 73)
• Other info: (eg. display resolution, ease-of-access settings)

Additional context

This issue affects all instances of the header across the Vocabulary project, impacting user experience on small devices. Making the header and navigation responsive will improve accessibility and usability across all projects that use this header component.

Resolution

• I would be interested in resolving this bug.

[possumbilities]

@wendy640 I can't seem to reproduce this precisely as you are describing. What zoom level are you set to? Are there any other settings that might be at play?

I get this down to 293px when the menu button just begins to overlap with the logo, which is a smaller screen-size than the framework is built to be compatible with at this time. I also see the menu items vertically, not horizontally as they are within your screenshot.

This is what I see:

[wendy640]

@possumbilities Thank you for your feedback. I appreciate it. I have reviewed the header component again, and I noticed the issue as well. To address it, I initially used overflow-x: hidden; on the html and body elements, which helped eliminate the unwanted horizontal scrolling.

here is a screenshot when i do not scroll from left to right

[possumbilities]

@wendy640 Your screenshot makes it look as if the menu's rendering behavior is incorrect for some reason, but I can't seem to get it to replicate. This merits further investigation to try to find a cause. Leaving as 🧹 status: ticket work required Needs more details before it can be worked on until we can sort that out.