Nav items overflowing navbar on medium viewports

[fvsch]

Describe the bug

When using the default theme, the navbar items are hidden away in a menu on screen widths lower than 768px.

At 768px and slightly larger sizes, the navbar may have to render on one line:

• The logo and site title
• A search box (when using the algolia options)
• Several nav items
• And the "extra navigation" button

When the nav items don't fit, their text may wrap, and their extreme line-height makes that result particularly bad:

Reproduction

1. Visit reproduction on StackBlitz: https://stackblitz.com/edit/vitepress-theme-issue-navbarmenulink?file=index.md
2. Resize the preview area to be roughtly 800px wide

Expected behavior

There are two levels of fixes:

1. Mitigate the breakage when nav items do wrap.

   • Nav links should not use the header height as their line-height (that's a bad way to do vertical centering of text, for the reason demonstrated in this issue).
   • Instead use something like min-height: var(--vp-nav-height-mobile); line-height: normal; (plus probably a tad of padding-block).

2. If the nav items still overflow their container, what should happen? Should they be clipped (overflow: hidden on the container), or should the container height grow (i.e. the container should be using min-height and not height)? Clipping might be better to conserve the design, but note that it's a WCAG violation (loss of content).

3. Prevent this situation altogether:

   • One option is to use the mobile layout earlier, e.g. for widths lower than 1000px instead of widths lower than 769px. (This might not be enough for some accessibility use cases, like text-only zoom.)
   • Another one is to implement a type of dynamic overflow menu, where all items that don't fit in the navbar are moved to the overflow menu. This requires runtime JS, probably using IntersectionObserver.

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) arm64 Apple M1
    Memory: 98.88 MB / 8.00 GB
    Shell: 3.5.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.17.0 - /opt/homebrew/opt/node@16/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.12.1 - ~/.npm-packages/bin/npm
  Browsers:
    Chrome: 105.0.5195.52
    Firefox Nightly: 106.0a1
    Safari: 15.6.1
  npmPackages:
    vitepress: ^1.0.0-alpha.13 => 1.0.0-alpha.13

Additional context

I can probably do a PR for the line-height part at least.

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[ambodu]

i think this problem can be solved by this way:https://stackblitz.com/edit/vitepress-theme-issue-navbarmenulink-5bjtqp?file=index.md
seems like this:https://github.com/vuejs/theme/pull/59😃

[fvsch]

i think this problem can be solved by this way: white-space: nowrap

That prevents text wrapping, so you don't get the "nav item becauses twice the height of the navbar" problem, but then the nav items will overflow the navbar and make other items go out of view much quicker.

I think my fix in #1273 is a better approach.

[ambodu]

@fvsch hey guys, i got you, #1273 is a better approach.😀

[kiaking]

Thanks for the report and also the PR, but I really think the right approach to this is to "change the title & menu structures".

There's no way we can fit an unlimited number of menus. So, if it gets over-wrapped, users should consider grouping them into a dropdown menu or shortening the labels.

It is all about balance. For example, if you have lots of social links, you will get less space for menu items too.

Sometimes, the content has to adjust to the design. Or, even better, create own custom nav bar that can display the long texts 👍

[fvsch]

I disagree. IMO designs should be implemented to be resilient to not-so-extreme cases, in line with the spirit of responsive design (see also: defensive CSS. Oftentimes that's necessary to meet WCAG AA requirements too.

The current design breaks easily with just ~3 items when those items are not short single word labels, and it currently breaks for two localizations of the Vite docs:

Spanish (the "…" menu is pushed to the right, outside of the viewport):

Chinese (showing the line-height issue again, with label wrappings to two lines, with huge gaps between lines):