diff --git a/src/features/dsp408/components/CompressorSection/CompressorSection.css b/src/features/dsp408/components/CompressorSection/CompressorSection.css index c080e52..7219e58 100644 --- a/src/features/dsp408/components/CompressorSection/CompressorSection.css +++ b/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; diff --git a/src/features/dsp408/components/DelaySection/DelaySection.css b/src/features/dsp408/components/DelaySection/DelaySection.css index cb3504b..16f334c 100644 --- a/src/features/dsp408/components/DelaySection/DelaySection.css +++ b/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 { diff --git a/src/features/dsp408/components/GateSection/GateSection.css b/src/features/dsp408/components/GateSection/GateSection.css index 9ac76e1..0f52ef0 100644 --- a/src/features/dsp408/components/GateSection/GateSection.css +++ b/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; diff --git a/src/features/dsp408/components/GateSection/GateSection.tsx b/src/features/dsp408/components/GateSection/GateSection.tsx index 455cadd..4bc73c7 100644 --- a/src/features/dsp408/components/GateSection/GateSection.tsx +++ b/src/features/dsp408/components/GateSection/GateSection.tsx @@ -139,8 +139,8 @@ function GateSection({ dsp, set_gate }: { dsp: DSP; set_gate: SetGateFn }) { Math.round(v).toString()} diff --git a/src/features/dsp408/components/GeqSection/GeqSection.css b/src/features/dsp408/components/GeqSection/GeqSection.css index 592e0ef..6baf86f 100644 --- a/src/features/dsp408/components/GeqSection/GeqSection.css +++ b/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 { diff --git a/src/features/dsp408/components/LimiterSection/LimiterSection.css b/src/features/dsp408/components/LimiterSection/LimiterSection.css index b17c6f4..ca290ac 100644 --- a/src/features/dsp408/components/LimiterSection/LimiterSection.css +++ b/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; diff --git a/src/features/dsp408/components/Matrixsection/Matrixsection.css b/src/features/dsp408/components/Matrixsection/Matrixsection.css index 9e564c3..c917ec4 100644 --- a/src/features/dsp408/components/Matrixsection/Matrixsection.css +++ b/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; diff --git a/src/features/dsp408/constants.ts b/src/features/dsp408/constants.ts index fee45e4..13b0c97 100644 --- a/src/features/dsp408/constants.ts +++ b/src/features/dsp408/constants.ts @@ -179,8 +179,8 @@ export const DELAY_RANGES: Record = { }; // ------ 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;