Skip to content

fix(ui): keep long nav labels from widening the page - #151

Open
erkamyaman wants to merge 4 commits into
x18n-dev:mainfrom
erkamyaman:fix/ui-nav-overflow
Open

erkamyaman wants to merge 4 commits into
x18n-dev:mainfrom
erkamyaman:fix/ui-nav-overflow

Conversation

@erkamyaman

Copy link
Copy Markdown
Member

In a narrow panel such as the VS Code webview, the top nav labels don't wrap or shrink. With longer labels, such as the Turkish ones, the header grows wider than the panel and the whole page scrolls sideways, cutting off the logo and the first tabs.

  • The logo keeps its size, and the tabs scroll within their own row, with no scrollbar (trackpad, mouse wheel or the arrows).
  • When the tabs don't fit, the cut-off side fades and ‹ › arrows appear beside the row, dimmed at an end. The open page's tab scrolls into view, clear of the fade. When the tabs fit, nothing changes.
  • The page frames stay 6px clear of each side, so the section corner marks no longer make a narrow panel scroll sideways. Content that is wider than the panel still scrolls.

Checked at 390, 420 and 520px in a browser and in a narrow VS Code panel. To try it in this repo, untick x18n.useLocalServer, since the repo's own node_modules holds the published @x18n/lsp.

Before:

Screen.Recording.2026-11-06.at.11.00.08.mov

After:

Screen.Recording.2026-11-06.at.10.59.13.mov

…g the page

The nav scrolls without a scrollbar, also with a mouse wheel. The main area no longer scrolls sideways when the section corner marks reach past a narrow panel; wide content scrolls in its own box.
When the tabs do not fit, the cut-off side fades and an arrow scrolls the row that way; the open page's tab scrolls into view. Nothing shows when the tabs fit.
- the page frames stay clear of the section corner marks, so main keeps its sideways scroll for content wider than the panel
- the nav re-measures when a tab widens (a count, a font), keeps the revealed tab clear of the fade, and lets the wheel through at an end
- both arrows stay while the row overflows, dimmed at an end, so the tabs do not shift and a focused arrow keeps the focus
@erkamyaman
erkamyaman requested review from antfu and antfubot November 6, 2026 08:04
@vercel

vercel Bot commented Nov 6, 2026

Copy link
Copy Markdown

@erkamyaman is attempting to deploy a commit to the NuxtLabs Team on Vercel.

A member of the Team first needs to authorize it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant