Skip to content

fix(docs): keep navbar brand fully visible at 1280px - #142

Merged
phodal merged 1 commit into
mainfrom
fix/docs-navbar-brand-truncation
Sep 2, 2026
Merged

fix(docs): keep navbar brand fully visible at 1280px#142
phodal merged 1 commit into
mainfrom
fix/docs-navbar-brand-truncation

Conversation

@phodal

@phodal phodal commented Sep 2, 2026

Copy link
Copy Markdown
Member

Summary

The docs navbar now shows the full Better Harness brand at 1280px laptop widths instead of Better Har….

Why

Traceability and Scope

  • Spec/ADR, if applicable: docs/specs/2026-09-02-133-docs-navbar-brand-truncation.md
  • Acceptance criteria addressed: AC-1 through AC-5
  • Canonical owners changed: none
  • Explicit non-goals: no Infima-to-Studio redesign; no hamburger at 1280px; no 996px breakpoint change

Change Type

  • Bug fix

Test and Review Evidence

Check Result
npx vitest run test/docs-navbar-brand-truncation.test.mjs 2 passed
npx vitest run test/skills-docs/doc-link-graph.test.mjs 8 passed
Playwright at 1280×800 / 1366×768 / 1024×768 / 390×844 Brand text Better Harness, scrollWidth <= clientWidth

Manual or visual evidence:

Playwright against http://127.0.0.1:3000/better-harness/. Desktop links remain at 1280px; hamburger remains at 390px. No console errors. Screenshots saved locally under .qoder/design-qa/docs-navbar/ (gitignored).

Risk and Recovery

  • Compatibility and cross-platform impact: CSS-only docs theme override.
  • Package, plugin, schema, or generated-file impact: none.
  • Rollback or recovery path: revert this commit.
  • Residual risk or unverified boundary: very crowded translations longer than English Better Harness were not measured.

AI Involvement

  • Level: Generated
  • Human review and validation: focused Vitest plus Playwright computed-style checks.

Checklist

  • I followed AGENTS.md, CONTRIBUTING.md, and the relevant canonical-owner guidance.
  • The change is focused and does not include unrelated local or generated state.
  • Tests and documentation match the behavior actually delivered.
  • Markdown links were checked when documentation moved or changed.
  • Cross-platform behavior was considered for Windows, macOS, and Linux.
  • Package/runtime verification was run when shipped files or dependencies changed.
  • User-facing or compatibility changes are recorded in CHANGELOG.md.
  • I have the right to contribute this work under the repository's MIT License.

Closes #133

Infima lets the navbar brand shrink and truncate, and the compact-item
query stopped at 1250px, so 1280px laptops showed Better Har…. Stop the
brand from shrinking at every width and extend compact padding through
1400px so the full product name stays readable without collapsing the
desktop nav.

Implements #133 using docs/specs/2026-09-02-133-docs-navbar-brand-truncation.md.
Validated with npx vitest run test/docs-navbar-brand-truncation.test.mjs
and Playwright against http://127.0.0.1:3000/better-harness/ at 1280,
1366, 1024, and 390.

Co-authored-by: augment-app-staging[bot] <182802480+augment-app-staging[bot]@users.noreply.github.com>
@phodal
phodal merged commit 4d2778e into main Sep 2, 2026
4 checks passed
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.

[Bug]: Navbar brand truncated to “Better Har…” at 1280px desktop width

1 participant