Open the docs chrome to a wide page and a styled disclosure

Andrew Dunnrequested to merge
design/wide-docs-page into main

What does this MR do and why?

Two opt-in classes: one lets a docs page render wider than the 960px article the shell allows, one styles a <details> in prose. The shell caps at 1280px with a 240px rail and a 2.5rem gutter, and the content column caps at 960px, so an article measures 960px at every viewport from 1280 up. That measure suits prose and not a page whose figures are the content, where a walk table of panel thumbnails beside step descriptions must fit both columns inside 960px. The bundle styles no <details> at all.

page-wide raises the shell to 1400px, the reference's own widest page measure, read off --book-page-max (chrome/book/base.css:53). The rail stays 240px and the existing 900px collapse still applies, because both sit on the same element. Neither file styles a bare element or overrides a default, so a consumer adopting neither renders byte-identically.

Two notes for the reviewer. A card-grid-3 modifier was written and dropped: two columns in a 960px article is that cap, not .card-grid's 320px minimum, and at 1080px the unmodified grid returns three. And disclosure.css does not replace patterns/disclosure-index.css, which names thirteen token properties this provisional tokens file lacks; importing it belongs in the canonical-tokens MR.

References

Closes #8 (closed). First consumer is the Evidence Factory guide: a walk table of panel thumbnails and step descriptions, with per-scenario disclosures.

Standards affected

None. No standards/<name>/ path is touched and no check.sh changes.

Exemption implications

None. No .reference.yaml field changes, and no consumer needs to update one.

Test plan

  • just guard passes locally
  • just check passes locally (21 standards, 0 failed)
  • just build && just agent succeeds
  • design/ changed: fixture rendered at 1440 and 2560, light and dark; shell 1400, article 1080, rail 240, an unclassed <details> unchanged

Reviewer checklist

  • Voice is GitLab Inc. neutral
  • No em-dashes in customer-facing prose
  • No filler words
  • Trailers present (Signed-off-by:, Changelog: added, AI-Assisted:/AI-Tools:)
  • CODEOWNERS section matches paths touched (/design/)
  • Not breaking for consumers: both classes are opt-in

Merge request reports