fix: panel on all pages

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

@@ -21,14 +21,17 @@
 }
 
 .compressor-panels {
+  display: grid;
+  grid-auto-flow: column;
   height: 100%;
-  display: flex;
   gap: var(--space-2);
   overflow-x: auto;
+  justify-content: center;
 }
 
 .compressor-panel {
   position: relative;
+  height: 100%;
 
   aspect-ratio: 0.5;
   flex: 0 0 auto;

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

@@ -22,10 +22,12 @@
 }
 
 .delay-panels {
+  display: grid;
+  grid-auto-flow: column;
   height: 100%;
-  display: flex;
   gap: var(--space-2);
   overflow-x: auto;
+  justify-content: center;
 }
 
 .delay-panel {

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

@@ -7,7 +7,7 @@
   right: 0;
   bottom: 0;
 
-  height: 40%;
+  height: var(--dsp-control-heigth);
 
   display: flex;
   align-items: flex-end;

src/features/dsp408/components/GateSection/GateSection.tsx

@@ -139,8 +139,8 @@ function GateSection({ dsp, set_gate }: { dsp: DSP; set_gate: SetGateFn }) {
           <LinearGraph
             xMin={envelope.t0}
             xMax={envelope.t5}
-            yMin={-90}
-            yMax={0}
+            yMin={-95}
+            yMax={5}
             xLabel="ms"
             yLabel="dB"
             formatX={(v) => Math.round(v).toString()}

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

@@ -22,10 +22,12 @@
 }
 
 .geq-panels {
+  display: grid;
+  grid-auto-flow: column;
   height: 100%;
-  display: flex;
   gap: var(--space-2);
   overflow-x: auto;
+  justify-content: center;
 }
 
 .geq-band-panel {

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

@@ -21,15 +21,17 @@
 }
 
 .limiter-panels {
+  display: grid;
+  grid-auto-flow: column;
   height: 100%;
-  display: flex;
   gap: var(--space-2);
   overflow-x: auto;
+  justify-content: center;
 }
 
 .limiter-panel {
   position: relative;
-  height: 10;
+  height: 100%;
 
   aspect-ratio: 0.5;
   flex: 0 0 auto;

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

@@ -22,16 +22,19 @@
 }
 
 .matrix-panels {
+  display: grid;
+  grid-auto-flow: column;
   height: 100%;
-  display: flex;
   gap: var(--space-2);
   overflow-x: auto;
+  justify-content: center;
 }
 
 .matrix-panel {
   position: relative;
+  height: 100%;
 
-  aspect-ratio: 0.6;
+  aspect-ratio: 0.5;
   flex: 0 0 auto;
 
   display: flex;

src/features/dsp408/constants.ts

@@ -179,8 +179,8 @@ export const DELAY_RANGES: Record<DelayUnit, [number, number]> = {
 };
 
 // ------ Graph constants ------
-export const GRAPH_X_MIN = 10;
-export const GRAPH_X_MAX = 30000;
+export const GRAPH_X_MIN = 14;
+export const GRAPH_X_MAX = 27000;
 export const GRAPH_Y_MIN = -21;
 export const GRAPH_Y_MAX = 21;