fix: draw over bounds

src/features/dsp408/components/GainSection/GainSection.tsx

@@ -413,7 +413,7 @@ function GainSection({
   const { yMin: inputYMin, yMax: inputYMax } = computeYAxisBounds(
     inputCurves,
     GRAPH_Y_MIN,
-    GRAPH_Y_MAX,
+    12,
     Y_AXIS_STEP
   );
   const { yMin: outputYMin, yMax: outputYMax } = computeYAxisBounds(
@@ -457,7 +457,18 @@ function GainSection({
             yLabel="dB"
             showGrid={true}
             formatX={(v) => Math.round(v).toString()}
-            formatY={(v) => Math.round(v).toString()}
+            formatY={(v) => {
+              // Always label 0.
+              if (v === 0) return '0';
+
+              // Positive side: label every 12 dB.
+              if (v > 0) {
+                return v % 12 === 0 ? `+${Math.round(v)}` : '';
+              }
+
+              // Negative side: label every 15 dB.
+              return Math.abs(v) % 15 === 0 ? Math.round(v).toString() : '';
+            }}
             draw={({ ctx, toPx }) => {
               drawCurves({
                 ctx,

src/features/dsp408/constants.ts

@@ -179,8 +179,16 @@ export const DELAY_RANGES: Record<DelayUnit, [number, number]> = {
 };
 
 // ------ Graph constants ------
-export const GRAPH_X_MIN = 14;
-export const GRAPH_X_MAX = 27000;
+const REAL_X_MIN = 20;
+const REAL_X_MAX = 20000;
+const X_LOG_PADDING = 0.05;
+
+const logMin = Math.log10(REAL_X_MIN);
+const logMax = Math.log10(REAL_X_MAX);
+const logRange = logMax - logMin;
+
+export const GRAPH_X_MIN = Math.floor(Math.pow(10, logMin - logRange * X_LOG_PADDING));
+export const GRAPH_X_MAX = Math.ceil(Math.pow(10, logMax + logRange * X_LOG_PADDING));
 export const GRAPH_Y_MIN = -21;
 export const GRAPH_Y_MAX = 21;