search

Grinnz / perldoc-browser

Perldoc Browser
https://perldoc.perl.org
Artistic License 2.0
55 stars 21 forks source link

Styling at "tablet" width causes the search input to overlap the viewport #30

Closed scottchiefbaker closed 4 years ago

scottchiefbaker commented 4 years ago

Viewing the site at tablet width (768px) causes the search form at the top to overlap the viewport and cause the page to be wider that it needs to be. This results in the page being able to be zoomed-out on a tablet to fit the search bar. Chrome and Firefox both exhibit this behavior on my tablet.

This can be easily reproduced in Firefox if you go in to "Responsize Design Mode" and set the mode to iPad.

Grinnz commented 4 years ago

Seems there are too many things in the menu bar and some will need to get hidden at the "md" breakpoint.

scottchiefbaker commented 4 years ago

Just to test I hid: Dev, Contact, and Github and it looks pretty decent @ 768px.

image

scottchiefbaker commented 4 years ago

One could make an argument to keep contact, and get rid of perl as the latter is redundant.

Right now Perldoc Browser and perl take you to the same place (different URLs but same content).

Grinnz commented 4 years ago

Not quite, the perl link goes to the index page of the currently selected version whereas the branded link always goes to the homepage.

Grinnz commented 4 years ago

What I may do is move the contact information into the footer of each page (people expect it there) and since that also includes the link to github, both of those can be removed from the menu.

scottchiefbaker commented 4 years ago

I like that solution... sounds good to me.

Grinnz commented 4 years ago

From my dev console this appears to be solved now by https://github.com/Grinnz/perldoc-browser/commit/551323990a796d1dc92ecd5240e55b2e5906df77 but will need to keep in mind the medium breakpoint in future changes to the menu bar.

scottchiefbaker commented 4 years ago

This doesn't appear to be solved for me. I still see the search box overflowing the navbar at the top by about 6em. It's definitely better, but still not "solved".

I've done a hard refresh and it's persisting. Maybe I'm missing something?

scottchiefbaker commented 4 years ago

FWIW it's much more pronounced on my real tablet than Desktop Firefox in tablet mode... although both exhibit the behaviour.

Grinnz commented 4 years ago

I'm now hiding the extra index page links at the md breakpoint.

scottchiefbaker commented 4 years ago

Just checked my tablet and Firefox desktop. Both look good now.

Thanks for the quick fix.

Grinnz commented 4 years ago

Navigation links are now contained in a dropdown which should keep this issue from resurfacing.