fix(showcase): command-center bars render — native div grid + width:100% (browser-verified)

Verification of #2496 surfaced two html-tier styling nuances; the page now renders
fully (browser-verified on a real objectstack serve console):
- the throughput bars used <grid columns={7}>, whose responsive classes collapse
  to 1 column below the md breakpoint inside the narrow card → switch to a native
  <div style={{display:grid, gridTemplateColumns:'repeat(7,1fr)'}}> for a fixed
  7-track grid;
- the bar <flex> items (display:flex, no children) collapsed to width:0 → use
  native block <div>s, and give the grid container width:100% (a flex-column
  child doesn't stretch horizontally by default).

Confirmed: header typography hierarchy (native <div style>), KPI cards, the
primary-bg card, the 7 throughput bars, and the activity dots all render correctly
and theme-consistent. No Tailwind.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: os-zhuang

examples/app-showcase/src/pages/command-center-jsx.page.ts

@@ -54,15 +54,15 @@ export const CommandCenterJsxPage = definePage({
   <grid columns={3} gap={5}>
     <flex direction="col" gap={6} style={{"gridColumn":"span 2","background":"hsl(var(--card))","border":"1px solid hsl(var(--border))","borderRadius":"var(--radius)","padding":"24px"}}>
       <div style={{"fontSize":"16px","fontWeight":"600","color":"hsl(var(--foreground))"}}>Weekly Throughput</div>
-      <grid columns={7} gap={4} style={{"height":"140px","alignItems":"end"}}>
-        <flex style={{"height":"48px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
-        <flex style={{"height":"86px","borderRadius":"8px","background":"hsl(var(--primary) / 0.7)"}} />
-        <flex style={{"height":"64px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
-        <flex style={{"height":"120px","borderRadius":"8px","background":"hsl(var(--primary))"}} />
-        <flex style={{"height":"58px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
-        <flex style={{"height":"100px","borderRadius":"8px","background":"hsl(var(--primary) / 0.7)"}} />
-        <flex style={{"height":"40px","borderRadius":"8px","background":"hsl(var(--primary) / 0.4)"}} />
-      </grid>
+      <div style={{"display":"grid","gridTemplateColumns":"repeat(7, 1fr)","gap":"16px","height":"140px","width":"100%","alignItems":"end"}}>
+        <div style={{"height":"48px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
+        <div style={{"height":"86px","borderRadius":"8px","background":"hsl(var(--primary) / 0.7)"}} />
+        <div style={{"height":"64px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
+        <div style={{"height":"120px","borderRadius":"8px","background":"hsl(var(--primary))"}} />
+        <div style={{"height":"58px","borderRadius":"8px","background":"hsl(var(--primary) / 0.55)"}} />
+        <div style={{"height":"100px","borderRadius":"8px","background":"hsl(var(--primary) / 0.7)"}} />
+        <div style={{"height":"40px","borderRadius":"8px","background":"hsl(var(--primary) / 0.4)"}} />
+      </div>
     </flex>
     <flex direction="col" gap={4} style={{"background":"hsl(var(--card))","border":"1px solid hsl(var(--border))","borderRadius":"var(--radius)","padding":"24px"}}>
       <div style={{"fontSize":"16px","fontWeight":"600","color":"hsl(var(--foreground))"}}>Recent Activity</div>