feat: prevent text selection on dsp sub pages

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

@@ -18,6 +18,9 @@
   z-index: 20;
 
   border-top: var(--border-width) solid var(--border-hairline);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .compressor-panels {
@@ -94,7 +97,7 @@
 
 .compressor-panel__cell--steppers {
   flex-direction: column;
-  justify-content: center;
+  justify-content: stretch;
   gap: 1cqh;
 }
 
@@ -111,6 +114,11 @@
   gap: 1cqh;
 }
 
+.compressor-panel__stepper-item .choice-stepper {
+  flex: 0 0 auto;
+  height: auto;
+}
+
 .compressor-panel__cell {
   display: flex;
   flex-direction: column;
@@ -145,6 +153,9 @@
 
   box-sizing: border-box;
   background: var(--bg-panel);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .compressor-graph-panel {

src/features/dsp408/components/DelaySection/DelaySection.css

@@ -19,6 +19,9 @@
   z-index: 20;
 
   border-top: var(--border-width) solid var(--border-hairline);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .delay-panels {
@@ -88,6 +91,9 @@
 
   box-sizing: border-box;
   background: var(--bg-panel);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .delay-graph-panel {

src/features/dsp408/components/GainSection/GainSection.css

@@ -19,6 +19,8 @@
   z-index: 20;
 
   border-top: var(--border-width) solid var(--border-hairline);
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .gain-panels {
@@ -75,6 +77,9 @@
 
   box-sizing: border-box;
   background: var(--bg-panel);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .gain-graph-panel {
@@ -168,6 +173,8 @@
   gap: 0.5cqh;
 
   overflow: hidden;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .magnitude-selector__chip {

src/features/dsp408/components/GateSection/GateSection.css

@@ -20,6 +20,9 @@
   z-index: 20;
 
   border-top: var(--border-width) solid var(--border-hairline);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .gate-panels {
@@ -106,6 +109,9 @@
 
   box-sizing: border-box;
   background: var(--bg-panel);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .gate-graph-panel {

src/features/dsp408/components/GeqSection/GeqSection.css

@@ -19,6 +19,9 @@
   z-index: 20;
 
   border-top: var(--border-width) solid var(--border-hairline);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .geq-panels {
@@ -114,6 +117,9 @@
 
   box-sizing: border-box;
   background: var(--bg-panel);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .geq-graph-panel {

src/features/dsp408/components/LimiterSection/LimiterSection.css

@@ -18,6 +18,9 @@
   z-index: 20;
 
   border-top: var(--border-width) solid var(--border-hairline);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .limiter-panels {
@@ -118,6 +121,9 @@
 
   box-sizing: border-box;
   background: var(--bg-panel);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .limiter-graph-panel {

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

@@ -19,6 +19,9 @@
   z-index: 20;
 
   border-top: var(--border-width) solid var(--border-hairline);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .matrix-panels {
@@ -87,10 +90,23 @@
   padding-inline: 3cqh;
 }
 
+.matrix-panel__row .choice-stepper {
+  align-self: center;
+  height: auto;
+  flex: 0 0 auto;
+}
+
 .matrix-flow {
   flex: 0 0 calc(100% - var(--dsp-control-heigth));
   min-height: 0;
   box-sizing: border-box;
   padding: var(--space-2);
   border-bottom: var(--border-width) solid var(--border-hairline);
+
+  user-select: none;
+  -webkit-user-select: none;
 }
+
+.matrix-gain-stepper .choice-stepper__input {
+  font-size: 2.8cqh;
+}

src/features/dsp408/components/Matrixsection/Matrixsection.tsx

@@ -101,8 +101,8 @@ function MatrixSection({
                             fontSize: '4cqh',
                             padding: 0,
                             minHeight: 0,
-                            marginTop: '2cqh',
-                            marginBottom: '2cqh',
+                            marginTop: '3cqh',
+                            marginBottom: '3cqh',
                           }}
                           onClick={() => handleToggle(output, input)}
                         >
@@ -110,6 +110,7 @@ function MatrixSection({
                         </Button>
 
                         <ChoiceStepper
+                          className="matrix-gain-stepper"
                           value={gain}
                           values={GAIN_VALUES}
                           formatLabel={(v: number) => `${v > 0 ? '+' : ''}${v.toFixed(1)} dB`}