feat: fully responsive gain tab

src/components/dsp408/GainSection/GainSection.css

@@ -1,5 +1,5 @@
 :root {
-  --gain-section-height: 40vh; /* your fixed % of screen height */
+  --gain-section-height: 50vh; /* your fixed % of screen height */
 }
 
 .gain-section {
@@ -33,26 +33,22 @@
   display: flex;
   flex-direction: row;
   align-items: stretch;
-  justify-content: safe center;
+  justify-content: safe center; /* centers when it fits, falls back to start-aligned scroll when it overflows */
   gap: var(--space-4);
-
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-hairline) transparent;
-
   width: 100%;
   height: 100%;
   min-width: 0;
   min-height: 0;
-
   overflow-x: auto;
   overflow-y: hidden;
 }
-.gain-panels > * {
-  height: 100%;
-  aspect-ratio: 90 / 340;  /* your panel's design ratio (title+slider+buttons) — tune */
+
+.gain-panel-frame {
   flex: 0 0 auto;
-  min-width: 0;
-  min-height: 0;
+  height: calc(100% - 8px);
+  aspect-ratio: var(--panel-w) / var(--panel-h);  /* now driven by JS, not duplicated */
+  margin: 4px 0;
+  box-sizing: border-box;
 }
 
 .gain-panels::-webkit-scrollbar {
@@ -65,3 +61,29 @@
 .gain-panels::-webkit-scrollbar-track {
   background: transparent;
 }
+
+.gain-panel {
+  /* width/height now set inline from DESIGN_WIDTH/HEIGHT, drop the fixed px here */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  border: 1px solid var(--border-hairline);
+  border-radius: var(--radius-md);
+  box-sizing: border-box;
+  padding: 8px;
+}
+
+.gain-panel__title {
+  width: 100%;
+
+  text-align: center;
+
+  font-family: var(--font-ui);
+  font-size: 12px;
+  font-weight: 600;
+
+  padding-bottom: 6px;
+
+  border-bottom: 1px solid var(--border-hairline);
+}

src/components/dsp408/GainSection/GainSection.tsx

@@ -1,4 +1,3 @@
-import VerticalStack from '../../VerticalStack/VerticalStack';
 import VerticalSlider from '../../Slider/VerticalSlider';
 import { invoke } from '@tauri-apps/api/core';
 import { InputChannel, Channel, OutputChannel } from '../../../types/dsp408State';
@@ -6,8 +5,12 @@ import { DSP } from '../../../types/types';
 import { NotificationType } from '../../../types/types';
 import { useState } from 'react';
 import Button from '../../Button/Button';
+import AutoScale from '../../AutoScale/AutoScale';
 import './GainSection.css';
 
+const DESIGN_WIDTH = 90;
+const DESIGN_HEIGHT = 380;
+
 function GainPanel({
   dsp,
   notify,
@@ -89,32 +92,43 @@ function GainPanel({
   };
 
   return (
-    <VerticalStack title={title}>
-      <VerticalSlider
-        min={-60}
-        max={12}
-        step={0.5}
-        switchStepValue={-10}
-        switchStep={0.1}
-        unit=" dB"
-        onChange={setGain}
-      />
-      {/* <Button
-        variant="toggle"
-        className={muted ? "active-danger" : ""}
-        onClick={toggleMute}  
-      >
-        {muted ? "Muted" : "Mute"}
-      </Button>
+    <div
+      className="gain-panel-frame"
+      style={
+        {
+          '--panel-w': DESIGN_WIDTH,
+          '--panel-h': DESIGN_HEIGHT,
+        } as React.CSSProperties
+      }
+    >
+      <AutoScale designWidth={DESIGN_WIDTH} designHeight={DESIGN_HEIGHT}>
+        <div className="gain-panel" style={{ width: DESIGN_WIDTH, height: DESIGN_HEIGHT }}>
+          <div className="gain-panel__title">{title}</div>
 
-      <Button
-        variant="toggle"
-        className={inverted ? "active-warning" : ""}
-        onClick={toggleInverse}
-      >
-        {inverted ? "Inverted" : "Invert"}
-      </Button> */}
-    </VerticalStack>
+          <VerticalSlider
+            min={-60}
+            max={12}
+            step={0.5}
+            switchStepValue={-10}
+            switchStep={0.1}
+            unit=" dB"
+            onChange={setGain}
+          />
+
+          <Button variant="toggle" className={muted ? 'active-danger' : ''} onClick={toggleMute}>
+            {muted ? 'Muted' : 'Mute'}
+          </Button>
+
+          <Button
+            variant="toggle"
+            className={inverted ? 'active-warning' : ''}
+            onClick={toggleInverse}
+          >
+            {inverted ? 'Inverted' : 'Invert'}
+          </Button>
+        </div>
+      </AutoScale>
+    </div>
   );
 }
 
@@ -131,14 +145,14 @@ function GainSection({
     { channel: { Input: InputChannel.InC }, title: 'In C' },
     { channel: { Input: InputChannel.InD }, title: 'In D' },
 
-    { channel: { Output: OutputChannel.Out1 }, title: "Out 1" },
-    { channel: { Output: OutputChannel.Out2 }, title: "Out 2" },
-    { channel: { Output: OutputChannel.Out3 }, title: "Out 3" },
-    { channel: { Output: OutputChannel.Out4 }, title: "Out 4" },
-    { channel: { Output: OutputChannel.Out5 }, title: "Out 5" },
-    { channel: { Output: OutputChannel.Out6 }, title: "Out 6" },
-    { channel: { Output: OutputChannel.Out7 }, title: "Out 7" },
-    { channel: { Output: OutputChannel.Out8 }, title: "Out 8" },
+    { channel: { Output: OutputChannel.Out1 }, title: 'Out 1' },
+    { channel: { Output: OutputChannel.Out2 }, title: 'Out 2' },
+    { channel: { Output: OutputChannel.Out3 }, title: 'Out 3' },
+    { channel: { Output: OutputChannel.Out4 }, title: 'Out 4' },
+    { channel: { Output: OutputChannel.Out5 }, title: 'Out 5' },
+    { channel: { Output: OutputChannel.Out6 }, title: 'Out 6' },
+    { channel: { Output: OutputChannel.Out7 }, title: 'Out 7' },
+    { channel: { Output: OutputChannel.Out8 }, title: 'Out 8' },
   ];
 
   return (