[BUG] Mobile header layout bug

[LesleyLai]

Does the issue belong in this repository?

Yes

Describe the bug

On mobile devices, the header lacks sufficient horizontal space to display all its contents. As a result, part of the search bar and the hamburger menu in the top-right corner are pushed off-screen.

In addition, the light-dark theme toggle is also at a weird spot that does not align with the underlying toolbar.

To Reproduce
Either open docs.vulkan.org on a device with a small screen, or open it via the browser's responsive design mode

Expected behaviour
The website has a mobile-friendly layout where all header elements are visible and properly aligned

Screenshots

Smartphone:

• Device: Samsung Galaxy S24
• OS: Android
• Browser: Firefox for Android, Chrome
• Version [e.g. 22]

[oddhack]

@gpx1000 this is a pretty significant UI issue. The searchbox does not have a visible component selector in portrait layout, and all the dropdown link menus to the right of the searchbox are lost. Thinking we should make the 'Vulkan DOCUMENTATION' image much smaller in mobile mode, and maybe stack the dropdown menus underneath the searchbox, or something of that nature.

That said, mobile is never going to be a great way to read the spec for most uses. It is full of wide tables and code snippets that massively overflow the right side of the screen on mobile in portrait layout, and to lesser degree even in landscape.

[gpx1000]

Maybe we try dynamically adding another row to the header? The logo might take a few rounds of getting approval and a new one made for different resolutions; we'll have to discuss.

We might look into formatting tables etc special for mobile via javascript. Although that could be closer to "lip stick on a pig."

[SaschaWillems]

As a quick fix, we could make the logo smaller when the screen width is below a certain threshold using the @media css functionality.

[oddhack]

As a quick fix, we could make the logo smaller when the screen width is below a certain threshold using the @media css functionality.

Here's the logo file: https://github.com/KhronosGroup/Vulkan-Site/blob/main/src/static/Vulkan_Docs.svg

If Dominic could make a smaller version, so the vertical extent is the same size as the adjacent searchbox on typical mobile screens, and change "DOCUMENTATION" to "DOCS" so it takes less horizontal space, that might suffice to bring the responsive hamburger menu on the right into view. @marty-johnson59 could you ask Dominic?

I notice there's also a lot of blank space to the left of the logo that is not present in the SVG, which is fine on desktop but could mostly or entirely be done away with on smaller screens. I think that part is a UI issue on us, not a logo issue.

[oddhack]

Maybe we try dynamically adding another row to the header?

I think we agreed today to just try shrinking the logo first. All the dropdowns ("Specs", "Resources", etc.) get collapsed into a hamburger menu on the upper-right by the responsive UI - but the enormous logo means you can't see, or get to the hamburger menu :-(

[oddhack]

Here are the two image updates Dominic came up with: (edit: which appear to both be transparent SVGs and may need tweaking for dark & light modes).