From 28ba1bce85b708548f246fefa6b4666ec74ccc07 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Fri, 19 Jun 2026 22:31:57 -0700 Subject: [PATCH] FN-6784: keep Command Center numbers on one line Command Center token totals now shrink to fit instead of wrapping digit groups. - Add inline-size containers around stat cards and live metrics for container-query scaling. - Replace digit wrapping with nowrap overflow clipping and clamp-based numeric font sizes. - Strengthen Command Center tests for exact live metric values and CSS no-wrap shrink contracts. Files changed: .../app/components/command-center/CommandCenter.css | 17 ++++++++++++----- .../command-center/__tests__/CommandCenter.test.tsx | 3 ++- .../CommandCenter.token-validity.css.test.ts | 19 +++++++++++++++---- 3 files changed, 29 insertions(+), 10 deletions(-) Fusion-Task-Id: FN-6784 Fusion-Task-Lineage: dfe165f4-7304-49eb-b46b-83c0a9e2c4a3 --- .../command-center/CommandCenter.css | 17 ++++++++++++----- .../__tests__/CommandCenter.test.tsx | 3 ++- .../CommandCenter.token-validity.css.test.ts | 19 +++++++++++++++---- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/packages/dashboard/app/components/command-center/CommandCenter.css b/packages/dashboard/app/components/command-center/CommandCenter.css index 72f32f7342..b684495481 100644 --- a/packages/dashboard/app/components/command-center/CommandCenter.css +++ b/packages/dashboard/app/components/command-center/CommandCenter.css @@ -106,6 +106,7 @@ FNXC:CommandCenterStyling 2026-06-18-22:38: FN-6680 standardizes the Command Center card rhythm across overview, area, table, team, and system chart surfaces: use --space-md padding/gaps, 1px solid --border-subtle, --radius-md, and --surface-1 so mobile and tablet charts do not look like separate components. */ .cc-stat-card { + container-type: inline-size; display: flex; flex-direction: column; gap: var(--space-sm); @@ -123,13 +124,17 @@ FN-6680 standardizes the Command Center card rhythm across overview, area, table /* FNXC:CommandCenterStyling 2026-06-19-00:00: -FN-6726 requires large comma-grouped token totals to wrap instead of forcing stat cards or live metrics wider across desktop, tablet, and mobile. jsdom cannot prove pixel overflow for min-content sizing, so keep these containment declarations paired with the raw CSS-rule regression test. +FN-6726 required large comma-grouped token totals to wrap instead of forcing stat cards or live metrics wider across desktop, tablet, and mobile. FN-6784 reverses that behavior because split digit groups read as multiple numbers. + +FNXC:CommandCenterStyling 2026-06-19-22:18: +FN-6784 requires stat and live-metric numbers to stay on one line and shrink by card/container width across desktop, tablet, and mobile. jsdom cannot prove pixel fit, so the CSS-rule contract guards nowrap plus container-query font clamps instead of wrapping. */ .cc-stat-value { max-width: 100%; min-width: 0; - overflow-wrap: anywhere; - font-size: 1.5rem; + overflow: hidden; + white-space: nowrap; + font-size: clamp(0.8rem, 7cqi, 1.5rem); font-variant-numeric: tabular-nums; color: var(--text); } @@ -240,6 +245,7 @@ FN-6700 reduces the live-strip decorative accent gradient, glow, and sweep inten } .cc-live-metric { + container-type: inline-size; min-inline-size: 0; display: flex; flex-direction: column; @@ -253,9 +259,10 @@ FN-6700 reduces the live-strip decorative accent gradient, glow, and sweep inten .cc-live-metric-value { max-width: 100%; min-width: 0; - overflow-wrap: anywhere; + overflow: hidden; + white-space: nowrap; color: var(--text); - font-size: 1.125rem; + font-size: clamp(0.75rem, 6cqi, 1.125rem); font-weight: 700; font-variant-numeric: tabular-nums; } diff --git a/packages/dashboard/app/components/command-center/__tests__/CommandCenter.test.tsx b/packages/dashboard/app/components/command-center/__tests__/CommandCenter.test.tsx index fac64e20c8..caa37ca960 100644 --- a/packages/dashboard/app/components/command-center/__tests__/CommandCenter.test.tsx +++ b/packages/dashboard/app/components/command-center/__tests__/CommandCenter.test.tsx @@ -484,7 +484,7 @@ describe("CommandCenter shell", () => { await screen.findByTestId("command-center-stat-tokens"); expect(statValue("command-center-stat-tokens")).toBe("1,234,567,890"); - expect(screen.getByTestId("command-center-live-tokens").textContent).toContain("1,234,567,890"); + expect(liveMetricValue("command-center-live-tokens")).toBe("1,234,567,890"); }); it("live-polls token totals for the Overview card and live strip", async () => { @@ -597,6 +597,7 @@ describe("CommandCenter shell", () => { await screen.findByTestId("command-center-stat-nodes"); expect(screen.queryByTestId("command-center-empty")).toBeNull(); expect(statValue("command-center-stat-tokens")).toBe("0"); + expect(liveMetricValue("command-center-live-tokens")).toBe("0"); expect(statValue("command-center-stat-nodes")).toBe("1"); expect(screen.queryByTestId("command-center-overview-charts")).toBeNull(); expect(screen.queryByTestId("command-center-overview-loading")).toBeNull(); diff --git a/packages/dashboard/app/components/command-center/__tests__/CommandCenter.token-validity.css.test.ts b/packages/dashboard/app/components/command-center/__tests__/CommandCenter.token-validity.css.test.ts index d901dd95a9..bde46b3a3d 100644 --- a/packages/dashboard/app/components/command-center/__tests__/CommandCenter.token-validity.css.test.ts +++ b/packages/dashboard/app/components/command-center/__tests__/CommandCenter.token-validity.css.test.ts @@ -101,16 +101,27 @@ function expectRuleContainsDeclaration(ruleBlock: string, property: string, valu /* FNXC:CommandCenterStyling 2026-06-19-00:00: -FN-6726 guards Command Center stat and live-metric value containment at the emitted CSS-rule level because jsdom cannot measure min-content overflow from large comma-grouped token totals. +FN-6726 guarded Command Center stat and live-metric value containment at the emitted CSS-rule level because jsdom cannot measure min-content overflow from large comma-grouped token totals. + +FNXC:CommandCenterStyling 2026-06-19-22:18: +FN-6784 changes the containment contract from wrapping to single-line numbers with container-query font shrink. This raw CSS assertion must fail if overflow-wrap:anywhere returns or if the card/metric containers stop exposing inline-size query units. */ -describe("Command Center stat value overflow containment (FN-6726)", () => { +describe("Command Center stat value no-wrap shrink containment (FN-6784)", () => { const css = readFileSync(join(COMMAND_CENTER_DIR, "CommandCenter.css"), "utf8"); - it("keeps stat and live metric values shrinkable and wrappable", () => { + it("keeps stat and live metric values single-line with container-query font clamps", () => { + const containers = [".cc-stat-card", ".cc-live-metric"]; + for (const selector of containers) { + const block = extractRuleBlock(css, selector); + expectRuleContainsDeclaration(block, "container-type", /inline-size/); + } + for (const selector of [".cc-stat-value", ".cc-live-metric-value"]) { const block = extractRuleBlock(css, selector); expectRuleContainsDeclaration(block, "min-width", /0/); - expectRuleContainsDeclaration(block, "overflow-wrap", /anywhere|break-word/); + expectRuleContainsDeclaration(block, "white-space", /nowrap/); + expectRuleContainsDeclaration(block, "font-size", /clamp\([^;]*cqi[^;]*\)/); + expect(block, `${selector} must not restore digit-group wrapping`).not.toMatch(/(^|\n)\s*overflow-wrap\s*:\s*(anywhere|break-word)\s*;/); } }); });