NavBar: right-hand controls overlap the Enterprise nav link at every width, and go off-screen below 1180px

[obasilakis]

Symptom

On an entitlement-enabled build the top nav renders the WebSocket status indicator (● Connected) on top of the Enterprise PRO link. The PRO badge and the version chip (v0.8.5 · 223b5570) both wrap to a second line and collide with their neighbours.

Reported from a local instance at v0.8.5 (223b5570):

Reproduced against a local stack at a 1180px viewport — identical collision:

Root cause

src/frontend/src/components/NavBar.vue lays the bar out as one flex justify-between row with exactly two children:

• left — <div class="flex">: logo + the hidden sm:ml-6 sm:flex sm:space-x-8 router-link row
• right — <div class="flex items-center space-x-4">: connection status, version chip, docs, theme toggle, user menu

Neither child sets min-w-0, so neither can shrink below its min-content width (flex items default to min-width: auto). When the two clusters' natural widths exceed the container they don't compress — they overflow into each other, and justify-between puts that overflow right in the middle of the bar.

Measured on the running instance (Chromium, default 16px root):

piece	width
link row (scrollWidth, 7 links + 6 × space-x-8 gaps)	760px
logo block + sm:ml-6	124px
left cluster total	884px
right cluster (Connected 82 + version 112 + docs 36 + theme 36 + avatar 32 + 4 × space-x-4)	362px
required	1246px
available (max-w-7xl 1280 − lg:px-8 64)	1216px

Over budget by 30px — and because the container is capped at max-w-7xl, the overlap does not go away on a wider monitor. It is present at every viewport width:

w=1600  overlap= 28px   rightEdge= 1408  avatarHit=DIV.w-8 h-8 rounded-full  (reachable)
w=1440  overlap= 28px   rightEdge= 1328  avatarHit=DIV.w-8 h-8 rounded-full  (reachable)
w=1280  overlap= 28px   rightEdge= 1248  avatarHit=DIV.w-8 h-8 rounded-full  (reachable)
w=1180  overlap= 32px   rightEdge= 1178  avatarHit=DIV.w-8 h-8 rounded-full  (reachable)
w=1024  overlap= 32px   rightEdge= 1178  avatarHit=NULL (off-screen)
w= 900  overlap= 32px   rightEdge= 1170  avatarHit=NULL (off-screen)
w= 768  overlap= 32px   rightEdge= 1170  avatarHit=NULL (off-screen)

The trigger is link count. The row is 5 links on an OSS build, but Sessions (v-if="isEntitled('shared_sessions')") and Enterprise (v-if="hasAnyEnterprise") add two more on an entitled build — which is what pushes it past the cap. A long agent name is not involved; this is purely the nav's own chrome.

Impact — not only cosmetic

Below ~1180px the right cluster's right edge (1170–1178px) runs past the viewport, and document.documentElement.scrollWidth stays equal to the viewport width, so there is no horizontal scroll to recover it. At 1024px and narrower the theme toggle and the user menu — the only route to Sign out — are unreachable (document.elementFromPoint() at the avatar's centre returns null).

At a 900px viewport — version chip, docs link, theme toggle and user menu are all gone:

Reproduction

1. Run an instance where at least one enterprise feature is entitled, so both Sessions and Enterprise render in the nav.
2. Log in and look at the top nav at any width → Connected overlaps Enterprise PRO.
3. Narrow the window to 1024px → the theme toggle and avatar menu are gone with no way to scroll to them.

Expected

• No overlap between the nav link row and the right-hand controls at any viewport width.
• The right-hand controls (docs, theme, user menu) stay on-screen and clickable at every supported width.
• Every nav link stays reachable when the row cannot fit.

Acceptance criteria

• At ≥1280px the full 7-link row and the full right cluster fit inside max-w-7xl with zero overlap.
• At 768–1279px no element of the left cluster intersects any element of the right cluster.
• The user menu button is hit-testable (elementFromPoint resolves to it) down to 768px.
• Nav links that do not fit remain reachable rather than clipped or overlapped.
• Regression covered by a Playwright spec in src/frontend/e2e/.