feat: improve gain section

src/components/dsp408/Slider/VerticalSlider.tsx

@@ -1,10 +1,7 @@
-import { useMemo, useRef, useState, useEffect } from 'react';
+import { useMemo, useRef, useState } from 'react';
 
 import './VerticalSlider.css';
 
-const DESIGN_WIDTH = 70;
-const DESIGN_HEIGHT = 240;
-
 type VerticalSliderProps = {
   min: number;
   max: number;
@@ -50,32 +47,6 @@ export default function VerticalSlider({
   const thumbRef = useRef<HTMLDivElement>(null);
   const keyboardEditing = useRef(false);
 
-  const viewportRef = useRef<HTMLDivElement>(null);
-  const [scale, setScale] = useState(1);
-
-  useEffect(() => {
-    const el = viewportRef.current;
-    if (!el) return;
-
-    const observer = new ResizeObserver((entries) => {
-      const entry = entries[0];
-      const { width, height } = entry.contentRect;
-      if (width === 0 || height === 0) return;
-      setScale(Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT));
-    });
-
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, []);
-
-  useEffect(() => {
-    if (dragging.current) return;
-    if (keyboardEditing.current) return;
-
-    setDisplayValue(value);
-    dragValue.current = value;
-  }, [value]);
-
   function getStep(value: number) {
     if (switchStepValue !== undefined && switchStep !== undefined && value >= switchStepValue) {
       return switchStep;
@@ -218,11 +189,9 @@ export default function VerticalSlider({
     <div
       className={['gauge-viewport', className].filter(Boolean).join(' ')}
       style={style}
-      ref={viewportRef}
     >
       <div
         className="gauge-container"
-        style={{ transform: `translate(-50%, -50%) scale(${scale})` }}
       >
         <div className="gauge-track">
           <div className="ticks left">