search

opensearch-project / project-website

The source to opensearch.org
https://opensearch.org
BSD 3-Clause "New" or "Revised" License
40 stars 480 forks source link

[BUG] Navbar - mobile breakpoint is set incorrectly. #2920

Open kaimmej opened 5 months ago

kaimmej commented 5 months ago

Bug

As the screen gets smaller, there is a range of display-widths where the navbar breaks from expected behavior. Cause: navbar items text-length are too long for the current mobile-breakpoint. This causes the navbar selection menus to wrap onto the next line.

image

docs page has the same issue image

as well as the footer on both sites image

Additionally, there is a 1-10 pixel range where the mobile breakpoint takes over, but is totally broken. This is difficult to reproduce but is there. image

Reproduce

Go to the main page, and drag the viewport window of your browser to be slimmer, and slimmer, until right before the mobile-breakpoint. You will see the navbar wrap to the next page.

Expected

The navbar and footer elements should not wrap to the next line.

Solution

We have hardcoded our mobile responsiveness, and it is broken in multiple ways. Transitioning the site to a frontend framework like bootstrap, where we would use out-of-the-box components is a good solution.

nateynateynate commented 5 months ago

Dang @kaimmej these are good finds. Thanks man.

dblock commented 5 months ago

Catch All Triage - 1 2 3 4 5 6