fix(dashboard): stop the navbar overflowing the page at narrow widths

[suleimansh]

Closes #980.

At a narrow viewport the top nav pushed the whole document wider than the screen, so the page scrolled sideways and slid the app off-screen. Same failure shape as #904, and jsdom can't see it (no layout engine), so I reproduced and verified in a real browser.

Root cause

The nav has two shrink-0 clusters — brand mark + "The Framework" wordmark on the left, "New session" + the icon buttons on the right — plus the project picker. Measured at 420px: brand 147px + picker ~122px + right cluster 217px, all fixed, so the <header> laid out at 538px and forced page scroll. The header's scrollWidth exactly equalled the document's, confirming it was the sole cause; the wide page content below sits inside the workspace row's overflow-hidden and is clipped (which is why #980 noted the content itself is fine).

Fix

Below sm the nav folds to what fits, the standard responsive-nav move:

• Brand keeps its mark (still the link home, The logo and wordmark should be a link home #909) but drops the "The Framework" wordmark.
• "New session" collapses to its + icon, still aria-labelled so it stays named for a screen reader.
• Project picker caps narrower (max-w-40 vs max-w-56) and truncates a long name, so a long project can't blow the nav out either.

At sm and up everything is exactly as before.

Verified in a real browser (zero quota)

Drove the built dashboard against a local daemon at several widths, reading document.documentElement.scrollWidth vs clientWidth:

/            @420px  -> scrollWidth 420  overflowsBy 0  ✓  (was 523, +103)
/<project>   @420px  -> scrollWidth 420  overflowsBy 0  ✓  (was 538, +118)
/<project>   @375px  -> scrollWidth 375  overflowsBy 0  ✓
/<project>   @1200px -> scrollWidth 1200 overflowsBy 0  ✓  wordmark + label back

Screenshots (420 / 1200) confirmed the +-only button renders cleanly and the full labels return at desktop width.

Tests

• dashboard 420 pass (was 419): one added guard on BrandLink that the wordmark keeps its responsive hidden sm:inline classes, so a future tidy-up can't silently bring the overflow back. jsdom can't assert the actual hide (no CSS/layout), so the browser drive above is the real proof.
• typecheck clean.