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