From effb698b0e749c485d182ff25463dcf770bff855 Mon Sep 17 00:00:00 2001
From: Thales Pereira <31625914+thcp@users.noreply.github.com>
Date: Wed, 23 Sep 2026 19:14:49 +0100
Subject: [PATCH] fix(ui): fit the analysis panel's text inside its own cards

The seven metadata cards size their text in fixed pixels while the row
they sit in is a seven column grid that tracks the window. Below about
1250px the text is wider than the card holding it, and flex-shrink:0 on
the value meant it did not stop at the card edge: "Natural Minor" at
17px is 133px of monospace in a 135px card, painted over the Dynamic
Range value next to it.

The long labels had the same problem in the other direction. "DYNAMIC
RANGE" and "TEMPO STABILITY" wrapped to a second line, and because the
card centres its content the second line landed on top of the value
rather than below it.

Values, labels, qualifiers, padding and gaps now scale with the viewport
through clamp(), the way the top bar does since #665. Labels are pinned
to one line, and both they and the values clip with an ellipsis as a
last resort rather than escaping the card. The qualifier shrinks four
times as fast as the value beside it, so "Peak -0.3 dB" gives up its
width before the number does.

The presence row below gets the same treatment, which is what stops
"BASS DEPTH" reading as "BA..." at the width where the row above was
already broken.

Measured rather than eyeballed: rendering the panel's real markup
against both stylesheets and checking every span for overflow, wrapping
and clipping shows the old CSS overflowing at 920px and 1000px and
clipping five labels, and the new CSS clean at 420, 600, 880, 920,
1000, 1100, 1250, 1440, 1600 and 1920px.

Closes #688
---
 static/css/daw.css | 40 ++++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/static/css/daw.css b/static/css/daw.css
index f0f16e67..bdadd6f3 100644
--- a/static/css/daw.css
+++ b/static/css/daw.css
@@ -1336,7 +1336,9 @@ input, textarea { font-family: inherit; }
    window (#480), and a third text row here cost more height than it carried
    information. */
 .daw-meta-card {
-  padding: 4px 16px;
+  /* Horizontal padding shrinks with the window. Seven columns at 950px are
+     ~135px each, and a fixed 16px a side spent a quarter of that on nothing. */
+  padding: 4px clamp(8px, 1vw, 16px);
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: column;
@@ -1346,33 +1348,49 @@ input, textarea { font-family: inherit; }
 }
 .daw-meta-card:last-child { border-right: none; }
 .meta-card-label {
-  font-size: 10px;
+  /* Never two lines. The card centres its content, so a wrapped "DYNAMIC
+     RANGE" did not push the value down, it painted over it. Ellipsis is the
+     floor here; the fluid size is what keeps it from being reached. */
+  font-size: clamp(9px, 0.72vw, 10px);
   line-height: 1;
   font-weight: 600;
   letter-spacing: 0.07em;
   text-transform: uppercase;
   color: var(--muted);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .meta-card-main {
   display: flex;
   align-items: baseline;
-  gap: 8px;
+  gap: clamp(4px, 0.5vw, 8px);
   min-width: 0;
 }
 .meta-card-value {
-  font-size: 17px;
+  /* "Natural Minor" at a fixed 17px is 133px of mono, wider than the card it
+     sits in below ~1250px, and flex-shrink:0 let it paint straight over the
+     next card's value. It shrinks now, and clips as a last resort. */
+  font-size: clamp(13px, 1.15vw, 17px);
   font-weight: 700;
   color: var(--fg);
   line-height: 1;
   font-family: var(--font-mono);
-  flex-shrink: 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .meta-card-value.accent { color: var(--accent); }
 .meta-card-value.stability-high { color: #4caf7d; }
 .meta-card-sub {
-  font-size: 11px;
+  font-size: clamp(9px, 0.75vw, 11px);
   line-height: 1;
   color: var(--muted);
+  /* Shrinks four times as fast as the value beside it: the qualifier is the
+     part worth losing first, the number is the reason the card exists. */
+  flex-shrink: 4;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -1528,18 +1546,20 @@ input, textarea { font-family: inherit; }
 }
 .stem-card[data-stem="vocals"] { grid-column: span 2; }
 .stem-card {
-  padding: 8px 12px;
+  padding: 8px clamp(6px, 0.8vw, 12px);
   border-right: 1px solid var(--border);
   display: flex;
   flex-direction: row;
   align-items: baseline;
   justify-content: space-between;
-  gap: 8px;
+  gap: clamp(4px, 0.5vw, 8px);
   min-width: 0;
 }
 .stem-card:last-child { border-right: none; }
 .stem-card-label {
-  font-size: 10px;
+  /* Fluid for the same reason as the labels above: at 950px these truncated to
+     "LE..." and "BA...", which name nothing. */
+  font-size: clamp(8px, 0.66vw, 10px);
   line-height: 1;
   font-weight: 600;
   /* Tighter than the metadata labels above: on a side-by-side row these
@@ -1554,7 +1574,7 @@ input, textarea { font-family: inherit; }
   white-space: nowrap;
 }
 .stem-card-pct {
-  font-size: 18px;
+  font-size: clamp(14px, 1.2vw, 18px);
   font-weight: 700;
   font-family: var(--font-mono);
   line-height: 1;