diff --git a/frontend/packages/swarm-ui/src/shell/Shell.css b/frontend/packages/swarm-ui/src/shell/Shell.css index 1e265176..1a16eb34 100644 --- a/frontend/packages/swarm-ui/src/shell/Shell.css +++ b/frontend/packages/swarm-ui/src/shell/Shell.css @@ -148,6 +148,15 @@ having shipped something to walk back first. */ animation: shell-page-enter 160ms ease; } +/* Opt-in widening for a route that genuinely needs more than a + readable-line-length column (see Shell.tsx's `WIDE_BODY_ROUTES`). + Only overrides `max-width` — margin/padding/animation stay + `.shell-body`'s, so this reads as "the same body, just wider" rather + than a parallel layout to keep in sync. 90em still centers with + visible margins on a typical desktop viewport; it isn't full-bleed. */ +.shell-body-wide { + max-width: 90em; +} @keyframes shell-page-enter { from { opacity: 0; diff --git a/frontend/packages/swarm-ui/src/shell/Shell.tsx b/frontend/packages/swarm-ui/src/shell/Shell.tsx index aeef0055..9cce6d4f 100644 --- a/frontend/packages/swarm-ui/src/shell/Shell.tsx +++ b/frontend/packages/swarm-ui/src/shell/Shell.tsx @@ -52,6 +52,16 @@ const NAV_ITEMS: { href: string; label: string; accent: string }[] = [ { href: '/components', label: 'components', accent: 'var(--blue)' }, ]; +// Routes that opt out of `.shell-body`'s 60em readable-line-length cap +// — mara screenshotted the issue report's 8-column table getting +// clipped; that width is deliberate for the rest of the UI's cards/ +// forms, but too narrow for a wide table. `.shell-body-wide` (Shell.css) is a +// modifier alongside the base class, not a replacement, so every other +// route's layout is untouched — first user of this allowlist, but a +// future wide page reaches for the same class rather than inventing +// its own cap. +const WIDE_BODY_ROUTES = new Set(['/issues']); + // Static fallback — matches `index.html`'s `