Closed briandominick closed 3 years ago
Would love a review from you @faunaee if you would.
https://deploy-preview-75--asciidocsy.netlify.app/docs/theme
On initial load, viewing at mobile widths, the page header looks like this:
Notice the horizontal scrollbar just above the "Search non-docs PAGES" field. Mobile users shouldn't have to scroll horizontally to see all navigation elements here.
When I click on the About label I see:
Now there is a vertical scrollbar in the area and the dropdown's items are cropped. Since the scrollbars are subtle. On my iPhone X, no scrollbars are present at all (at least, not until you try to scroll that area), so it is not obvious that there are more items than just "Theme Background".
Ideally, the dropdown's contents would appear in full, overlapping the header area and extending into the content area as necessary.
Okay @faunaee I was able to reproduce that in Firefox desktop, and I think I undid all the settings causing that. Here's what I'm seeing now.
It's not super at extremely narrow widths, as it can crop the navbar, but I don't think I'm going to be able to solve that at this time. We're talking <350px width, which I would imagine is extremely rare.
I am going to merge this PR so I can get 0.2.1 out the door and start on 0.3.0. If there's anything remaining on this we can reopen.
Thanks @faunaee!
LGTM! 👍
Resolves #13, #14, #15.
Also adjusts placement of second search field at mobile widths.