fix: side-by-side layout for treemap and punchcard heatmaps

Treemap on left (3fr), two punchcards stacked on right (2fr) using
new .vizRow grid layout. Replaces full-width stacked arrangement.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

ui/src/pages/DashboardTab/DashboardL1.tsx

@@ -448,28 +448,26 @@ export default function DashboardL1() {
         </div>
       )}
 
-      {/* Treemap: app volume vs SLA compliance */}
+      {/* Treemap + Punchcard heatmaps side by side */}
       {treemapItems.length > 0 && (
+        <div className={styles.vizRow}>
           <Card title="Application Volume vs SLA Compliance">
             <Treemap
               items={treemapItems}
-            width={800}
+              width={600}
-            height={250}
+              height={300}
               onItemClick={(id) => navigate(`/dashboard/${id}`)}
             />
           </Card>
-      )}
+          <div className={styles.punchcardStack}>
-
+            <Card title="Transactions (7-day pattern)">
-      {/* Punchcard heatmaps: transactions and errors by weekday x hour */}
+              <PunchcardHeatmap cells={punchcardData ?? []} mode="transactions" width={400} height={140} />
-      {(punchcardData?.length ?? 0) > 0 && (
-        <div className={styles.chartGrid}>
-          <Card title="Transaction Volume (7-day pattern)">
-            <PunchcardHeatmap cells={punchcardData!} mode="transactions" width={380} height={300} />
             </Card>
-          <Card title="Error Volume (7-day pattern)">
+            <Card title="Errors (7-day pattern)">
-            <PunchcardHeatmap cells={punchcardData!} mode="errors" width={380} height={300} />
+              <PunchcardHeatmap cells={punchcardData ?? []} mode="errors" width={400} height={140} />
             </Card>
           </div>
+        </div>
       )}
     </div>
   );

ui/src/pages/DashboardTab/DashboardL2.tsx

@@ -427,28 +427,26 @@ export default function DashboardL2() {
         </div>
       )}
 
-      {/* Treemap: route volume vs SLA compliance */}
+      {/* Treemap + Punchcard heatmaps side by side */}
       {treemapItems.length > 0 && (
+        <div className={styles.vizRow}>
           <Card title="Route Volume vs SLA Compliance">
             <Treemap
               items={treemapItems}
-            width={800}
+              width={600}
-            height={250}
+              height={300}
               onItemClick={(id) => navigate(`/dashboard/${appId}/${id}`)}
             />
           </Card>
-      )}
+          <div className={styles.punchcardStack}>
-
+            <Card title="Transactions (7-day pattern)">
-      {/* Punchcard heatmaps: transactions and errors by weekday x hour */}
+              <PunchcardHeatmap cells={punchcardData ?? []} mode="transactions" width={400} height={140} />
-      {(punchcardData?.length ?? 0) > 0 && (
-        <div className={styles.chartGrid}>
-          <Card title="Transaction Volume (7-day pattern)">
-            <PunchcardHeatmap cells={punchcardData!} mode="transactions" width={380} height={300} />
             </Card>
-          <Card title="Error Volume (7-day pattern)">
+            <Card title="Errors (7-day pattern)">
-            <PunchcardHeatmap cells={punchcardData!} mode="errors" width={380} height={300} />
+              <PunchcardHeatmap cells={punchcardData ?? []} mode="errors" width={400} height={140} />
             </Card>
           </div>
+        </div>
       )}
     </div>
   );

ui/src/pages/DashboardTab/DashboardTab.module.css

@@ -123,6 +123,19 @@
   width: 100%;
 }
 
+/* Visualization row: treemap left (wider) + punchcards right (stacked) */
+.vizRow {
+  display: grid;
+  grid-template-columns: 3fr 2fr;
+  gap: 16px;
+}
+
+.punchcardStack {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
 /* Errors section */
 .errorsSection {
   background: var(--bg-surface);