Docs navbar brand truncation

Traceability

• Spec ID: docs-navbar-brand-truncation
• Story: #133
• Status: Implemented

Intent

At 1280px the docs site navbar shows Better Har… instead of Better Harness. The brand is a primary identity landmark, so laptop widths must keep the full title readable without hiding Docs, Inspector, Blog, or search.

Keep the existing Infima desktop navbar. Do not replace it with a hamburger at 1280px, and do not change the product name.

Acceptance Scenarios

• AC-1: At 1280×800 the navbar brand text is exactly Better Harness, with no ellipsis and no clipped glyphs. The same holds at 1366×768.
• AC-2: At 1280px the desktop navbar still shows Docs, Inspector, Blog, Demo Report, search, locale, and GitHub. It does not collapse to the mobile menu.
• AC-3: Compact laptop widths still keep the brand fully visible. If nav items need space, shrink item padding or search width before truncating the title.
• AC-4: The 996px mobile breakpoint is unchanged. Below it, the hamburger may hide desktop links, but the brand title remains Better Harness.
• AC-5: Keyboard focus, overflow, and console/page errors stay clean on the homepage navbar at 1280px, 1024px, and 390px.

Non-goals

• Redesigning the docs navbar or applying Studio DESIGN.md tokens to Infima.
• Removing Inspector New, locale, search, or GitHub items.
• Changing the 996px Docusaurus mobile breakpoint.
• Editing Studio, Inspector Workbench, or report chrome.

Plan and Tasks

1. Keep .navbar__brand from shrinking (min-width: auto / flex-shrink: 0) and disable title overflow ellipsis on desktop.
2. Raise the compact-item media query from max-width: 1250px past 1280px so 1280px laptops use the tighter padding and search width.
3. Leave @media (max-width: 996px) Inspector badge rules unchanged.
4. Verify with Playwright against the served docs site.

Decision rationale: Infima sets .navbar__brand \{ min-width: 0 \} and .navbar__title uses text--truncate. The current compact query stops at 1250px, so 1280px still uses full padding and the brand loses. Protect the title first, then reclaim space from items and search.

Test and Review Evidence

• AC-1/AC-2/AC-3: Playwright at http://127.0.0.1:3000/better-harness/ with viewport 1280×800 and 1366×768. Brand text Better Harness, scrollWidth <= clientWidth, desktop Docs/Inspector/Blog/Demo Report remain, hamburger display: none. Compact query now covers 997px–1400px.
• AC-4: 390×844 still uses hamburger (display: flex); brand text stays Better Harness with overflow: visible.
• AC-5: no console errors; screenshots under .qoder/design-qa/docs-navbar/.
• Focused: npx vitest run test/docs-navbar-brand-truncation.test.mjs (2 passed).