fix; compressoor steppers

src/features/dsp408/components/CompressorSection/CompressorSection.css

@@ -99,6 +99,7 @@
   flex-direction: column;
   justify-content: stretch;
   gap: 1cqh;
+  display: flex;
 }
 
 .compressor-panel__stepper-item {
@@ -119,6 +120,14 @@
   height: auto;
 }
 
+.compressor-panel__stepper {
+  display: flex;
+  font-size: 4cqh;
+  text-align: center;
+  align-items: stretch;
+  height: 100%;
+}
+
 .compressor-panel__cell {
   display: flex;
   flex-direction: column;
@@ -220,3 +229,15 @@
   flex: 1;
   min-height: 0;
 }
+
+.compressor-panel__stepper--centered .choice-stepper__input {
+  text-align: center;
+  padding: 0;
+  margin: 0;
+}
+
+.compressor-panel__stepper--centered .choice-stepper__arrows {
+  flex: 0 0 20%;
+  width: 20%;
+  padding-right: 0;
+}

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

@@ -81,27 +81,29 @@ function CompressorPanel({
         <div className="compressor-panel__cell compressor-panel__cell--steppers">
           <div className="compressor-panel__stepper-item">
             <ChoiceStepper
-              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
-              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>