fix; compressoor steppers

src/components/ChoiceStepper/ChoiceStepper.css

@@ -5,7 +5,6 @@
   position: relative;
   display: flex;
   align-items: stretch;
-  justify-content: center;
 
   border: var(--border-width) solid var(--border-hairline);
   border-radius: var(--radius-sm);
@@ -23,7 +22,6 @@
   text-align: left;
 
   color: var(--accent-brand);
-
   background: transparent;
   border: none;
 
@@ -44,7 +42,6 @@
   justify-content: center;
 
   height: 100%;
-
   box-sizing: border-box;
 
   padding-right: 1%;
@@ -52,7 +49,6 @@
 
 .choice-stepper__arrow-btn {
   height: 50%;
-
   min-width: 0;
   min-height: 0;
 

src/components/ChoiceStepper/ChoiceStepper.tsx

@@ -87,7 +87,10 @@ function ChoiceStepperList<T>({
   };
 
   return (
-    <div className={`choice-stepper ${className ?? ''}`} data-disabled={disabled || undefined}>
+    <div
+      className={`choice-stepper ${className ?? ''}`}
+      data-disabled={disabled || undefined}
+    >
       <input
         id={id}
         className="choice-stepper__input"
@@ -171,7 +174,10 @@ function ChoiceStepperRange({
   };
 
   return (
-    <div className={`choice-stepper ${className ?? ''}`} data-disabled={disabled || undefined}>
+    <div
+      className={`choice-stepper ${className ?? ''}`}
+      data-disabled={disabled || undefined}
+    >
       <input
         id={id}
         className="choice-stepper__input"

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>