vinzenz/hyperhive
vinzenz/hyperhive
Watch
0
0
Fork
You've already forked hyperhive
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

swarm-ui: widen the shell body for the issue report route

Browse source 
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.
This commit is contained in:
iris 2026-08-31 22:46:08 +02:00 • committed by mara
commit e395737a25
2 changed files with 24 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/packages/swarm-ui/src/shell/Shell.css
View file

@ -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;

17
frontend/packages/swarm-ui/src/shell/Shell.tsx
View file

@ -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>