handle overflows in the settings menu with horizontal scrolling

companion/src/pages/settings/Settings.module.css

@@ -140,13 +140,46 @@
   .settings-page__sidebar {
     border-right: 0;
     border-bottom: 1px solid var(--border-subtle);
+    overflow-x: scroll;
+    overflow-y: hidden;
   }
 
   .settings-page__nav {
     flex-direction: row;
     overflow-x: auto;
   }
 
+  /* Subtle, stable horizontal scrollbar for small screens */
+  .settings-page__nav {
+    scrollbar-width: thin;
+    scrollbar-color: rgba(100, 100, 100, 0.35) transparent;
+  }
+
+  .settings-page__sidebar::-webkit-scrollbar,
+  .settings-page__nav::-webkit-scrollbar {
+    height: 10px;
+    background: transparent;
+  }
+
+  .settings-page__sidebar::-webkit-scrollbar-track,
+  .settings-page__nav::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  .settings-page__sidebar::-webkit-scrollbar-thumb,
+  .settings-page__nav::-webkit-scrollbar-thumb {
+    background-color: rgba(100, 100, 100, 0.35);
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+    min-height: 24px;
+  }
+
+  .settings-page__sidebar::-webkit-scrollbar-thumb:hover,
+  .settings-page__nav::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(100, 100, 100, 0.5);
+  }
+
   .settings-page__item {
     white-space: nowrap;
   }

companion/src/pages/settings/Settings.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import {
   IconActivity,
   IconAccessible,
@@ -26,11 +26,30 @@ type SettingsPageProps = {
 
 export default function SettingsPage({ settings, onSettingsChange, onCheckForUpdates, isCheckingForUpdate }: Readonly<SettingsPageProps>) {
   const [activeSection, setActiveSection] = useState<SettingsSection>('general');
+  const navRef = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const el = navRef.current;
+    if (!el) return;
+
+    const shouldHandle = () => window.matchMedia('(max-width: 820px)').matches;
+
+    const onWheel = (e: WheelEvent) => {
+      if (!shouldHandle()) return;
+      if (el.scrollWidth <= el.clientWidth) return;
+      if (e.deltaY === 0) return;
+      e.preventDefault();
+      el.scrollLeft += e.deltaY;
+    };
+
+    el.addEventListener('wheel', onWheel, { passive: false });
+    return () => el.removeEventListener('wheel', onWheel as EventListener);
+  }, []);
 
   return (
     <section className={styles['settings-page']} aria-label="Settings">
       <aside className={styles['settings-page__sidebar']}>
-        <nav className={styles['settings-page__nav']} aria-label="Settings sections">
+        <nav ref={navRef} className={styles['settings-page__nav']} aria-label="Settings sections">
           <button
             className={`${styles['settings-page__item']} ${activeSection === 'general' ? styles['settings-page__item--active'] : ''}`.trim()}
             type="button"