FE-1455: Tighten the docs site chrome

[kube]

🌟 What is the purpose of this PR?

Implements FE-1455: 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 cards.

Content column at 1440px: 720px → 869px, and 1024px with the sidebar collapsed.

Top of stack #9226, on FE-1457. apps/petrinaut-docs only; the bundle stays host-neutral.

🔗 Related links

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

🔍 What does this change?

• Widths (src/styles/chrome.css, registered as Starlight customCss): sidebar 18.75rem → 15rem, content 45rem → 56rem. Starlight sizes both panels from --sl-sidebar-width, so the left nav gets its own --pnd-sidebar-width in the two places Starlight consumes it; collapsing it no longer gives the table of contents a negative width.
• Collapse and resize (src/components/SiteTitle.astro): a toggle button and a drag handle. SiteTitle is the only overridable component in the fixed header, which is the chrome that stays on screen when the pane is gone. Collapsing sets data-pnd-sidebar on the root and widens content to 64rem; the handle resizes between 176px and 480px, with arrow-key support. Both persist in localStorage, restored by a head script that runs before the first stylesheet so a collapsed sidebar never renders open first.
• Header: logo 2rem → 1.5rem, title from 20px semibold to 14px medium, uppercase with 0.09em letter-spacing.
• Images: 0.5rem radius and a color-mix border, the same values .arch-card uses, so a diagram frame matches the cards in both themes. The SVG interior is untouched.

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 custom CSS and the SiteTitle override.

🕸️ 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 no unit tests. turbo run build --filter @apps/petrinaut-docs passes (61 pages) and lint:tsc covers the component.

Checked in the browser on generated and authored pages, in dev and in the production preview: 1440px, 1024px and 375px, 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 20, 2026 10:53am
petrinaut-docs	Ready	Preview	Aug 20, 2026 10:53am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
hashdotdesign-tokens	Ignored	Preview	Aug 20, 2026 10:53am
petrinaut	Skipped		Aug 20, 2026 10:53am