Updates

ui/styles.css

@@ -541,7 +541,9 @@ body[data-reduce-motion='1'] .view {
 #charts-view .metrics-shell {
   flex: 1 1 auto;
   min-height: 0;
-  height: auto;
+  /* Flex + height:0 gives the shell a definite size so the wall scrolls inside it */
+  height: 0;
+  overflow: hidden;
 }
 
 /* Overview: denser home that prefers to fit the pane */
@@ -1218,10 +1220,12 @@ button.metrics-tf.thin-history:not(.active) {
 .metrics-shell {
   display: grid;
   grid-template-columns: 220px minmax(0, 1fr);
+  grid-template-rows: minmax(0, 1fr);
   gap: var(--space);
   min-height: 0;
-  /* Height comes from #charts-view flex — avoid vh calc (caused #content + wall double scroll) */
-  height: auto;
+  min-width: 0;
+  width: 100%;
+  overflow: hidden;
 }
 
 .metrics-toc {
@@ -1299,7 +1303,9 @@ button.metrics-tf.thin-history:not(.active) {
 }
 
 .metrics-wall {
+  min-width: 0;
   min-height: 0;
+  height: 100%;
   overflow: auto;
   padding-right: 2px;
   scroll-behavior: smooth;
@@ -1369,8 +1375,10 @@ button.metrics-tf.thin-history:not(.active) {
 
 .metrics-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
+  /* auto-fit collapses empty tracks so cards stretch across the full wall width */
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
   gap: 14px;
+  width: 100%;
 }
 
 .metric-card {
@@ -1413,15 +1421,12 @@ button.metrics-tf.thin-history:not(.active) {
 }
 
 .metric-card--hero {
-  grid-column: span 1;
+  grid-column: span 2;
 }
 
-@media (min-width: 1400px) {
-  .metrics-grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
+@media (max-width: 720px) {
   .metric-card--hero {
-    grid-column: span 2;
+    grid-column: auto;
   }
 }
 
@@ -1663,11 +1668,12 @@ html[data-theme='light'] .metric-card canvas {
 }
 
 .section-kpis {
-  display: flex;
-  flex-wrap: wrap;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 8px;
   margin: 0 0 12px;
   min-height: 0;
+  width: 100%;
 }
 
 .section-kpi {
@@ -1681,7 +1687,8 @@ html[data-theme='light'] .metric-card canvas {
   border-radius: 10px;
   padding: 8px 10px;
   cursor: pointer;
-  min-width: 110px;
+  min-width: 0;
+  width: 100%;
   font: inherit;
   text-align: left;
 }
@@ -1693,7 +1700,7 @@ html[data-theme='light'] .metric-card canvas {
 
 .section-kpi .kpi-label {
   font-size: 11px;
-  max-width: 160px;
+  max-width: 100%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;