FE-1455: Tighten the docs site chrome

[kube]

🌟 What is the purpose of this PR?

The docs site ran on Starlight's defaults, which spent most of the width on the two side panels, and the header carried an oversized logo and title. Diagrams sat in square-cornered frames next to rounded content blocks. This PR narrows the chrome, hands the width to the content column, and makes the sidebar collapsible and resizable. It touches apps/petrinaut-docs only; the bundle stays host-neutral.

In stack #9280, FE-1457 (#9267) sits below and FE-1314 (#9162) above.

🔗 Related links

• FE-1455 (internal): this PR
• FE-1447 (internal): the components whose radius and border the images now match

🔍 What does this change?

• Widths (src/styles/chrome.css, registered as Starlight customCss): the sidebar narrows from 18.75rem to 15.5rem, and the content column widens from 45rem to 56rem, or 64rem with the sidebar collapsed. The left nav gets its own --pnd-sidebar-width because Starlight sizes both side panels from --sl-sidebar-width, and collapsing the nav must zero one panel without giving the table of contents a negative width.
• Collapse and resize (src/components/SiteTitle.astro): a toggle button and a drag handle. Collapsing sets data-pnd-sidebar on the root; the handle resizes between 224px and 480px, with arrow-key support. Both persist in localStorage, restored by a head script that runs before first paint so a collapsed sidebar never renders open and then jumps.
• Header: the logo drops to 1.5rem, the title drops from 20px semibold to 14px medium, uppercase with 0.09em letter-spacing, and the Starlight title becomes "Docs" beside the Petrinaut logo.
• Sidebar labels and groups: labels render on one line and fade at the trailing edge instead of wrapping; group open and close animate where ::details-content and interpolate-size are supported, with an instant toggle elsewhere.
• Code font: JetBrains Mono through Astro's font support, downloaded and subset at build time so a reader makes no request to a font host; a Head.astro override emits the faces and preload.
• Images: 0.5rem radius and a color-mix border, the same values .arch-card uses, so a diagram frame matches the layer components in both themes. The SVG interior is untouched.

Review fixes

• Every sidebar rule requires [data-has-sidebar], so the splash-template 404 page gets no toggle, no resize handle, and no collapsed-width variables.
• The toggle hover uses gray-5: the dark header background is gray-6 itself, where a gray-6 hover would be invisible.
• The toggle's negative start margin stays within the title wrapper's overflow: clip, which cuts anything past it.
• The file header names Page.astro's unlayered style block as the exception to the claim that no rule fights Starlight on specificity.
• A dead min-width on the label spans is removed.
• The SiteTitle comment's claim that it is the header's only overridable component was false; it now says the component is the header's leftmost, beside the rail the controls act on.
• The README's hoistingLimits paragraph moved back under "Notes on configuration".

Pre-Merge Checklist 🚀

🚢 Has this modified a publishable library?

This PR:

• modifies a workspace but not a publishable library

📜 Does this require a change to the docs?

The changes in this PR:

• require changes to docs which are made as part of this PR
  • The app README describes the chrome overrides, the SiteTitle override, and the code font.

🕸️ Does this require a change to the Turbo Graph?

The changes in this PR:

• do not affect the execution graph

🛡 What tests cover this?

Presentation only, so there are no unit tests. turbo run build --filter @apps/petrinaut-docs passes and lint:tsc covers the component.

Checked in the browser on generated and authored pages, in dev and in the production preview, at 1440px, 1024px and 375px, in light and dark. The toggle persists across a reload with no flash, drag and arrow keys resize and clamp, both controls hide at 375px where the mobile drawer still works, and no page overflows horizontally.

❓ How to test this?

1. turbo run dev --filter @apps/petrinaut-docs
2. Toggle the sidebar from the header control, drag its right edge, then reload: the state comes back.

🐾 Next steps

Collapsed content width is 64rem rather than the 68rem a 1440px viewport allows, because at 68rem the column sat flush against the edge.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hash	Ready	Preview	Aug 22, 2026 3:04am
petrinaut	Ready	Preview	Aug 22, 2026 3:04am
petrinaut-docs	Ready	Preview	Aug 22, 2026 3:04am

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
hashdotdesign-tokens	Ignored	Preview	Aug 22, 2026 3:04am

[cursor]

PR Summary

Low Risk
Presentation-only Starlight chrome in the docs app; no auth, data, or bundle-generator changes. Sidebar state uses localStorage with a try/catch for private browsing.

Overview
Gives the Petrinaut docs site more room for content by narrowing Starlight’s side panels, shrinking the header, and adding a collapsible, resizable left nav. Collapse and width persist in localStorage and restore before first paint so the sidebar does not flash open.

Desktop-only toggle and drag handle live in a SiteTitle override; sidebar rules are gated on [data-has-sidebar] so the 404 splash page is untouched. Labels stay on one line with a fade when clipped, and group expand/collapse animates where the browser supports it.

Also self-hosts JetBrains Mono (subset at build, no font-host request) and rounds markdown images so diagrams match the layer cards. Title beside the logo is now “Docs”.

^{Reviewed by Cursor Bugbot for commit 85722ed. Bugbot is set up for automated code reviews on this repo. Configure here.}

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 6857f61. Configure here.}

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.