feat: graph header on gain panel

src/features/dsp408/components/GainSection/GainSection.css

@@ -22,8 +22,9 @@
 }
 
 .gain-panels {
+  display: grid;
+  grid-auto-flow: column;
   height: 100%;
-  display: flex;
   gap: var(--space-2);
   overflow-x: auto;
 }
@@ -106,37 +107,94 @@
 
 .gain-graph-title-row {
   flex: 0 0 auto;
+
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  gap: 0.75cqh;
+  padding: 1cqh 1.5cqh;
+
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* First row: title left, Show stages right */
+.gain-graph-title-line {
   display: flex;
   align-items: center;
   justify-content: space-between;
+
+  width: 100%;
+  min-width: 0;
   gap: 1cqh;
-  padding: 1cqh 1.5cqh;
-  flex-wrap: wrap;
 }
 
-.gain-graph-title-row .gain-graph-title {
+.gain-graph-title-line .gain-graph-title {
+  flex: 1 1 auto;
+  min-width: 0;
+
   padding: 0;
+
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
+/* Compact button on the right */
+.gain-stages-toggle {
+  flex: 0 0 auto;
+
+  width: auto !important;
+  min-width: max-content;
+
+  padding: 0.4cqh 1cqh;
+  font-size: 1.8cqh;
+  line-height: 1.2;
+
+  white-space: nowrap;
+}
+
+/* Channel Selector */
 .magnitude-selector {
+  width: 100%;
+  min-width: 0;
+
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  flex-wrap: nowrap;
+
   gap: 0.5cqh;
+
+  overflow: hidden;
 }
 
 .magnitude-selector__chip {
+  flex: 0 1 auto;
+  min-width: 0;
+
   display: flex;
   align-items: center;
+
   gap: 0.6cqh;
+
   font-family: var(--font-ui);
   font-size: 1.8cqh;
+
   padding: 0.4cqh 1cqh;
+
   background: var(--bg-void);
   color: var(--text-muted);
+
   border: var(--border-width) solid var(--border-hairline);
   border-radius: var(--radius-sm);
+
   cursor: pointer;
   opacity: 0.5;
+
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 .magnitude-selector__chip.active {
@@ -148,7 +206,17 @@
 .magnitude-selector__swatch {
   width: 1.2cqh;
   height: 1.2cqh;
+
   border-radius: 50%;
   background: var(--chip-color);
+
   flex: 0 0 auto;
 }
+
+.magnitude-selector__label {
+  min-width: 0;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}