From e395737a25d589b3e7cabd28179aa8c600e085ad Mon Sep 17 00:00:00 2001
From: iris <iris@hyperhive.local>
Date: Mon, 31 Aug 2026 22:46:08 +0200
Subject: [PATCH] swarm-ui: widen the shell body for the issue report route
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

mara (#3877): issue report too narrow — the 8-column table was
clipped by .shell-body's 60em readable-line-length cap, which is right
for the rest of the UI's cards/forms but too tight for a wide table.

damocles diagnosed the root cause and scoped the shape (route
allowlist + an additive .shell-body-wide modifier, no prop plumbing
through App.tsx) before asking for a nod; mara then routed the actual
build to me. Implemented that shape as scoped: /issues opts into a
90em cap via WIDE_BODY_ROUTES, every other route keeps 60em untouched.

Verified with real headless-chromium screenshots at 1280px: the issue
report's full 8-column row (through 'transitively blocks') now fits
with no horizontal scroll, and a second screenshot of /agents confirms
every other route is unaffected.
---
 frontend/packages/swarm-ui/src/shell/Shell.css |  9 +++++++++
 frontend/packages/swarm-ui/src/shell/Shell.tsx | 17 +++++++++++++++--
 2 files changed, 24 insertions(+), 2 deletions(-)

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 `<title>` 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>