From 6aeba1fe83e9fa2e4ad8dbb6417ce9dd3fc96ac4 Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Mon, 30 Mar 2026 10:32:23 +0200
Subject: [PATCH] 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     | 36 +++++++++----------
 ui/src/pages/DashboardTab/DashboardL2.tsx     | 36 +++++++++----------
 .../DashboardTab/DashboardTab.module.css      | 13 +++++++
 3 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/ui/src/pages/DashboardTab/DashboardL1.tsx b/ui/src/pages/DashboardTab/DashboardL1.tsx
index 0e419391..e7125867 100644
--- a/ui/src/pages/DashboardTab/DashboardL1.tsx
+++ b/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>
diff --git a/ui/src/pages/DashboardTab/DashboardL2.tsx b/ui/src/pages/DashboardTab/DashboardL2.tsx
index dfd080ee..5133fa5a 100644
--- a/ui/src/pages/DashboardTab/DashboardL2.tsx
+++ b/ui/src/pages/DashboardTab/DashboardL2.tsx
@@ -427,27 +427,25 @@ export default function DashboardL2() {
         </div>
       )}
 
-      {/* Treemap: route volume vs SLA compliance */}
+      {/* Treemap + Punchcard heatmaps side by side */}
       {treemapItems.length > 0 && (
-        <Card title="Route Volume vs SLA Compliance">
-          <Treemap
-            items={treemapItems}
-            width={800}
-            height={250}
-            onItemClick={(id) => navigate(`/dashboard/${appId}/${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="Route Volume vs SLA Compliance">
+            <Treemap
+              items={treemapItems}
+              width={600}
+              height={300}
+              onItemClick={(id) => navigate(`/dashboard/${appId}/${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>
diff --git a/ui/src/pages/DashboardTab/DashboardTab.module.css b/ui/src/pages/DashboardTab/DashboardTab.module.css
index 0687f310..b876c64d 100644
--- a/ui/src/pages/DashboardTab/DashboardTab.module.css
+++ b/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);