From a9b2535c9c64ae58dae5205f590014151c40cde6 Mon Sep 17 00:00:00 2001
From: Matei <tools@matei.work>
Date: Fri, 12 Jun 2026 14:35:18 -0400
Subject: [PATCH] fix(mapgen-studio): status chip drops the seed suffix when
 the Game bar narrows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The live summary splits into the always-visible turn segment and a seed
suffix on a container-query span (@max-3xl on the header's center column) —
at laptop widths the bar stays one row instead of wrapping; the full
Turn · Seed string stays in the tooltip/accessible name. Live-verified:
bar height 82px (wrapped) → 46px (single row) at a 733px column.
---
 .../src/ui/components/AppHeader.tsx           |  5 ++--
 .../src/ui/components/GameConsole.tsx         | 28 ++++++++++++++++---
 .../test/runInGame/GameConsole.test.tsx       |  3 ++
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/apps/mapgen-studio/src/ui/components/AppHeader.tsx b/apps/mapgen-studio/src/ui/components/AppHeader.tsx
index cbcc0f3c0d..5dc47aee48 100644
--- a/apps/mapgen-studio/src/ui/components/AppHeader.tsx
+++ b/apps/mapgen-studio/src/ui/components/AppHeader.tsx
@@ -114,8 +114,9 @@ export const AppHeader: React.FC<AppHeaderProps> = ({
 
       {/* Center: the Game bar — config selector, live command cluster, and
           the trailing game-setup disclosure. Map/world settings live in the
-          footer's World/Map console (Pass-5 zoning v2). */}
-      <div className="min-w-0 flex flex-col items-center gap-2 overflow-visible">
+          footer's World/Map console (Pass-5 zoning v2). `@container` lets the
+          status chip drop its seed suffix when this column narrows. */}
+      <div className="@container min-w-0 flex flex-col items-center gap-2 overflow-visible">
         <div
           className={`flex min-h-10 max-w-full flex-wrap items-center justify-center gap-x-3 gap-y-2 px-3 py-1.5 rounded-lg border backdrop-blur-sm ${panelBg} ${panelBorder}`}>
 
diff --git a/apps/mapgen-studio/src/ui/components/GameConsole.tsx b/apps/mapgen-studio/src/ui/components/GameConsole.tsx
index 8c0de4da95..50127083a5 100644
--- a/apps/mapgen-studio/src/ui/components/GameConsole.tsx
+++ b/apps/mapgen-studio/src/ui/components/GameConsole.tsx
@@ -143,14 +143,22 @@ export const GameConsole: React.FC<GameConsoleProps> = ({
   // `warning` token (not the slate identity accent).
   const liveDotClass =
     liveRuntime?.status === "ok" ? "bg-success" : liveRuntime?.status === "error" ? "bg-destructive" : "bg-muted-foreground";
-  const liveText =
+  // The live summary splits into a primary segment (always rendered) and the
+  // seed suffix, which the chip drops when the Game bar container narrows
+  // (container query on the header's center column). The full string stays in
+  // the tooltip/accessible name.
+  const liveHasGameIdentity =
+    liveRuntime?.status === "ok" && (liveRuntime.turn !== undefined || liveRuntime.seed !== undefined);
+  const liveTextPrimary =
     liveRuntime?.status === "ok"
-      ? liveRuntime.turn !== undefined || liveRuntime.seed !== undefined
-        ? `Turn ${liveRuntime.turn ?? "?"} · Seed ${liveRuntime.seed ?? "?"}`
+      ? liveHasGameIdentity
+        ? `Turn ${liveRuntime.turn ?? "?"}`
         : liveRuntime.readiness ?? "Civ7 ready"
       : liveRuntime?.status === "error"
         ? liveRuntime.error ?? "Live unavailable"
         : "Live idle";
+  const liveTextSeedSuffix = liveHasGameIdentity ? ` · Seed ${liveRuntime?.seed ?? "?"}` : "";
+  const liveText = `${liveTextPrimary}${liveTextSeedSuffix}`;
   const runInGamePhaseLabel = runInGameStatus ? formatRunInGamePhaseLabel(runInGameStatus.phase) : "Run in Game";
   const runInGameStateLabel =
     runInGameStatus && !isRunInGameRunning
@@ -219,6 +227,18 @@ export const GameConsole: React.FC<GameConsoleProps> = ({
     : saveDeployActive
       ? saveDeployLabel ?? liveText
       : liveText;
+  // Rendered chip content: live summaries drop the seed suffix when the Game
+  // bar container narrows (`@max-3xl` ≈ 768px container width) — the turn is
+  // the at-a-glance signal; the seed stays in the tooltip and hang-off.
+  const chipContent =
+    !isRunInGameRunning && !saveDeployActive && liveTextSeedSuffix ? (
+      <>
+        {liveTextPrimary}
+        <span className="@max-3xl:hidden">{liveTextSeedSuffix}</span>
+      </>
+    ) : (
+      chipText
+    );
   const chipTitle = [
     `Live: ${liveText}`,
     liveRuntime?.autoplayActive ? `Autoplay active${liveRuntime.autoplayPaused ? " (paused)" : ""}` : null,
@@ -265,7 +285,7 @@ export const GameConsole: React.FC<GameConsoleProps> = ({
             <Radio className={`w-3.5 h-3.5 ${liveGameStudioRelation === "stale" ? "text-warning" : textMuted}`} />
             <div className={`w-2 h-2 shrink-0 rounded-full ${combinedDotClass}`} />
             <span className={`truncate text-data font-medium ${liveGameStudioRelation === "stale" ? "text-warning" : textPrimary}`}>
-              {chipText}
+              {chipContent}
             </span>
             {liveRuntime?.autoplayActive ? (
               <span className="shrink-0 rounded border border-warning/40 px-1.5 py-0.5 text-label text-warning">
diff --git a/apps/mapgen-studio/test/runInGame/GameConsole.test.tsx b/apps/mapgen-studio/test/runInGame/GameConsole.test.tsx
index 81fd05cf27..a9ec4b989a 100644
--- a/apps/mapgen-studio/test/runInGame/GameConsole.test.tsx
+++ b/apps/mapgen-studio/test/runInGame/GameConsole.test.tsx
@@ -216,6 +216,9 @@ describe("GameConsole live runtime and save/deploy", () => {
     // palette class — the design system forbids hardcoded color utilities.
     expect(html).toContain("border-warning");
     expect(html).toContain("Seed 123");
+    // Responsive chip: the seed suffix rides a container-query span so the
+    // chip collapses to just the turn when the Game bar narrows.
+    expect(html).toContain("@max-3xl:hidden");
   });
 });