feat: improve gain section

src/components/dsp408/ChannelGroup/ChannelGroup.css

@@ -1,16 +1,15 @@
 .channel-group {
+  /* container-type: inline-size; */
   position: relative;
-  height: calc(100% - var(--space-1) - var(--space-1));
-  flex: 0 0 auto;
+  flex: 1 1 0;
+  min-height: 0;
 
   display: flex;
-  align-items: flex-end;
 
-  border: 1px solid var(--border-hairline);
+  border: var(--border-width) solid var(--border-hairline);
   border-radius: var(--radius-md);
 
-  /* enough top padding to fully clear the label's own height, not just its border-overlap */
-  padding: calc(1.2vh + var(--space-3)) var(--space-3) 0;
+  padding: 4cqh var(--space-3) 0;
   margin-bottom: var(--space-1);
   margin-top: var(--space-1);
   box-sizing: border-box;
@@ -19,14 +18,14 @@
 
 .channel-group__label {
   position: absolute;
-  top: var(--space-2); /* sits inside the padded space, not straddling the border */
+  top: 1cqh;
   left: 50%;
-  transform: translateX(-50%); /* only horizontal centering now — no vertical overlap */
+  transform: translateX(-50%);
 
   padding: 0 var(--space-2);
 
   font-family: var(--font-ui);
-  font-size: var(--tab-close-font);
+  font-size: 2cqh;
   font-weight: var(--font-weight-semibold);
   color: var(--text-muted);
 
@@ -39,5 +38,5 @@
   flex-direction: row;
   align-items: stretch;
   height: 100%;
-  gap: var(--space-2);
-}
+  gap: var(--space-1);
+}