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,6 +81,7 @@ 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]}
@@ -88,12 +89,13 @@ function CompressorPanel({
     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`}
@@ -101,7 +103,7 @@ function CompressorPanel({
     onLiveValue(channel, 'knee', value);
     commit({ knee: value });
   }}
-            />
+/>
             <div className="compressor-panel__cell-label">Knee</div>
           </div>
         </div>