From ed1ca4bd116091eb4fa023a36aa1874d2e3c42da Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 5 Jul 2026 09:00:23 +0000 Subject: [PATCH] fix(showcase): stretch Command Center's flex-column children to full width MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The 3-up chart band (cc_rowA/cc_rowB) rendered at a collapsed ~100px width per column, wide enough to render but far too narrow to be readable — the "D" chart-width finding from #2616/#2620, not actually fixed by objectui#2254 despite that PR touching this exact area. Root cause: cc_root (the page's outer `type:'flex'` container) never set `alignItems`, so the `flex` component's own default (`align: 'start'` → Tailwind `items-start`) applied. In a `flex-direction:column` container, `align-items:flex-start` means children size to their own content instead of stretching to the container's width — so each grid-based chart band (cc_rowA/cc_rowB) shrank to whatever intrinsic width its charts naturally wanted (~100-130px each) rather than filling the ~1100px available. Verified live (Playwright + a real backend): row-A chart SVGs measured 100px wide before this fix, 350px after — filling the actual available width. Screenshot-confirmed all three charts now render full width with readable axes/legends. The unrelated `coverage.test.ts` failure on this branch (new registry kinds `trigger`/`router`/`function`/`service` not yet in KIND_COVERAGE) pre-exists on main and is untouched by this change. --- examples/app-showcase/src/ui/pages/command-center.page.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/app-showcase/src/ui/pages/command-center.page.ts b/examples/app-showcase/src/ui/pages/command-center.page.ts index 465c2eddbc..6806164da2 100644 --- a/examples/app-showcase/src/ui/pages/command-center.page.ts +++ b/examples/app-showcase/src/ui/pages/command-center.page.ts @@ -115,7 +115,7 @@ export const CommandCenterPage = definePage({ type: 'flex', responsiveStyles: { large: { - minHeight: '100%', display: 'flex', flexDirection: 'column', gap: '16px', + minHeight: '100%', display: 'flex', flexDirection: 'column', alignItems: 'stretch', gap: '16px', padding: '22px 26px 32px', background: 'radial-gradient(1200px 540px at 50% -14%, hsl(192 86% 46% / 0.10) 0%, transparent 60%), ' +