From f6bc46dd9884100a80554d0ff8ae7c150a238045 Mon Sep 17 00:00:00 2001
From: LucasDLTG <lucas.deletang.legravier@gmail.com>
Date: Sun, 13 Sep 2026 10:06:48 +0200
Subject: [PATCH] fix; compressoor steppers

---
 .../ChoiceStepper/ChoiceStepper.css           |  4 ---
 .../ChoiceStepper/ChoiceStepper.tsx           | 10 ++++--
 .../CompressorSection/CompressorSection.css   | 21 ++++++++++++
 .../CompressorSection/CompressorSection.tsx   | 34 ++++++++++---------
 4 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/src/components/ChoiceStepper/ChoiceStepper.css b/src/components/ChoiceStepper/ChoiceStepper.css
index c39e6e8..43fb96f 100644
--- a/src/components/ChoiceStepper/ChoiceStepper.css
+++ b/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;
 
diff --git a/src/components/ChoiceStepper/ChoiceStepper.tsx b/src/components/ChoiceStepper/ChoiceStepper.tsx
index fd44ca3..af3f34a 100644
--- a/src/components/ChoiceStepper/ChoiceStepper.tsx
+++ b/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"
diff --git a/src/features/dsp408/components/CompressorSection/CompressorSection.css b/src/features/dsp408/components/CompressorSection/CompressorSection.css
index ba287c0..71c4c71 100644
--- a/src/features/dsp408/components/CompressorSection/CompressorSection.css
+++ b/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;
+}
diff --git a/src/features/dsp408/components/CompressorSection/CompressorSection.tsx b/src/features/dsp408/components/CompressorSection/CompressorSection.tsx
index 4326397..bb8bec7 100644
--- a/src/features/dsp408/components/CompressorSection/CompressorSection.tsx
+++ b/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>