fix: matrix choice selector

src/features/dsp408/components/CompressorSection/CompressorSection.tsx

@@ -81,29 +81,29 @@ function CompressorPanel({
         <div className="compressor-panel__cell compressor-panel__cell--steppers">
           <div className="compressor-panel__stepper-item">
             <ChoiceStepper
-  className="compressor-panel__stepper compressor-panel__stepper--centered"
-  value={comp.ratio}
-  values={RATIO_ORDER}
-  formatLabel={(v) => RATIO_LABEL[v]}
-  onChange={(value) => {
-    onLiveValue(channel, 'ratio', value);
-    commit({ ratio: value });
-  }}
-/>
+              className="compressor-panel__stepper compressor-panel__stepper--centered"
+              value={comp.ratio}
+              values={RATIO_ORDER}
+              formatLabel={(v) => RATIO_LABEL[v]}
+              onChange={(value) => {
+                onLiveValue(channel, 'ratio', value);
+                commit({ ratio: value });
+              }}
+            />
             <div className="compressor-panel__cell-label">Ratio</div>
           </div>
 
           <div className="compressor-panel__stepper-item">
             <ChoiceStepper
-  className="compressor-panel__stepper compressor-panel__stepper--centered"
-  value={comp.knee}
-  values={KNEE_VALUES}
-  formatLabel={(v) => `${v} dB`}
-  onChange={(value) => {
-    onLiveValue(channel, 'knee', value);
-    commit({ knee: value });
-  }}
-/>
+              className="compressor-panel__stepper compressor-panel__stepper--centered"
+              value={comp.knee}
+              values={KNEE_VALUES}
+              formatLabel={(v) => `${v} dB`}
+              onChange={(value) => {
+                onLiveValue(channel, 'knee', value);
+                commit({ knee: value });
+              }}
+            />
             <div className="compressor-panel__cell-label">Knee</div>
           </div>
         </div>

src/features/dsp408/components/LimiterSection/LimiterSection.tsx

@@ -206,10 +206,13 @@ function LimiterSection({ dsp, set_limiter }: { dsp: DSP; set_limiter: SetLimite
           <div className="limiter-graph__meters">
             {outputs.map((output) => {
               const outputState = dsp.state.current_config.output_states[output];
-              const idx = OUTPUT_METER_INDEX[output];
 
               return (
-                <MeterBar key={output} label={outputState.name} meter={dsp.meters.channels[idx]} />
+                <MeterBar
+                  key={output}
+                  label={outputState.name}
+                  meter={dsp.output_meters.meters[output]}
+                />
               );
             })}
           </div>

src/features/dsp408/components/Matrixsection/Matrixsection.css

@@ -92,7 +92,7 @@
 
 .matrix-panel__row .choice-stepper {
   align-self: center;
-  height: auto;
+  aspect-ratio: 3 / 1;
   flex: 0 0 auto;
 }
 
@@ -109,4 +109,11 @@
 
 .matrix-gain-stepper .choice-stepper__input {
   font-size: 2.8cqh;
+  text-align: center;
 }
+
+.matrix-gain-stepper .choice-stepper__arrows {
+  flex: 0 0 20%;
+  width: 20%;
+  padding-right: 0;
+}