feat: responsive header

src/components/topbar/Topbar.tsx

@@ -4,6 +4,7 @@ import AnimatedLogo from '../../assets/icons/AnimatedLogo';
 import { PlusIcon } from '../../assets/icons/PlusIcon';
 import { CrownIcon } from '../../assets/icons/CrownIcon';
 import { Led } from '../Led/Led';
+import { CloseIcon } from '../../assets/icons/CloseIcon';
 
 import './Topbar.css';
 
@@ -15,7 +16,12 @@ function getStep(count: number) {
 }
 
 function Tab({
-  dsp, active, dimmed, step, onSelect, onRemove,
+  dsp,
+  active,
+  dimmed,
+  step,
+  onSelect,
+  onRemove,
 }: {
   dsp: DSP;
   active: boolean;
@@ -43,7 +49,7 @@ function Tab({
           onRemove();
         }}
       >
-        x
+        <CloseIcon />
       </span>
     </button>
   );
@@ -81,19 +87,19 @@ function TopBar({
     el.dataset.fadeStart = String(!atStart);
     el.dataset.fadeEnd = String(!atEnd && el.scrollWidth > el.clientWidth);
   };
-  
+
   useEffect(() => {
-  const el = tabstripRef.current;
-  if (!el) return;
-  const onWheel = (e: WheelEvent) => {
-    if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
-      el.scrollLeft += e.deltaY;
-      e.preventDefault();
-    }
-  };
-  el.addEventListener('wheel', onWheel, { passive: false });
-  return () => el.removeEventListener('wheel', onWheel);
-}, []);
+    const el = tabstripRef.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
+        el.scrollLeft += e.deltaY;
+        e.preventDefault();
+      }
+    };
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel);
+  }, []);
 
   useEffect(() => {
     updateFade();
@@ -164,8 +170,8 @@ function TopBar({
             setSelect(null);
           }}
         >
-        <CrownIcon className="icon-crown" />
-      </button>
+          <CrownIcon className="icon-crown" />
+        </button>
       </div>
     </header>
   );