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 `` default, so a page // never flashes something else before the fetch below resolves, and an // operator who never set `services.hyperhive.swarm.name` sees the exact @@ -298,8 +308,11 @@ export function Shell({ children }: { children: ComponentChildren }) { </div> </header> {/* Keyed by route so it remounts (and replays its entrance - animation) on every navigation — see the file-top comment. */} - <div class="shell-body" key={location}> + animation) on every navigation — see the file-top comment. + `shell-body-wide` is additive (see `WIDE_BODY_ROUTES` above), + not a swap — `.shell-body`'s padding/animation rules still + apply, only the max-width cap changes. */} + <div class={'shell-body' + (WIDE_BODY_ROUTES.has(location) ? ' shell-body-wide' : '')} key={location}> {children} </div> </div>