From 2dd17c2038f19c66c66bbeb29ca06f80e7193ab2 Mon Sep 17 00:00:00 2001
From: Ferretosan <129646624+Ferretosan@users.noreply.github.com>
Date: Sat, 1 Aug 2026 13:43:37 +1000
Subject: [PATCH 1/3] handle overflows in the settings menu with horizontal
 scrolling

---
 companion/src/pages/settings/Settings.module.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/companion/src/pages/settings/Settings.module.css b/companion/src/pages/settings/Settings.module.css
index 1c4ba99..ac080de 100644
--- a/companion/src/pages/settings/Settings.module.css
+++ b/companion/src/pages/settings/Settings.module.css
@@ -140,6 +140,8 @@
   .settings-page__sidebar {
     border-right: 0;
     border-bottom: 1px solid var(--border-subtle);
+    overflow-x: scroll;
+    overflow-y: hidden
   }
 
   .settings-page__nav {

From f0f09fc604a711add499aa2f842694002ec59b40 Mon Sep 17 00:00:00 2001
From: Ferretosan <129646624+Ferretosan@users.noreply.github.com>
Date: Sat, 1 Aug 2026 13:43:37 +1000
Subject: [PATCH 2/3] handle overflows in the settings menu with horizontal
 scrolling

---
 companion/src/pages/settings/Settings.module.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/companion/src/pages/settings/Settings.module.css b/companion/src/pages/settings/Settings.module.css
index 1c4ba99..ac080de 100644
--- a/companion/src/pages/settings/Settings.module.css
+++ b/companion/src/pages/settings/Settings.module.css
@@ -140,6 +140,8 @@
   .settings-page__sidebar {
     border-right: 0;
     border-bottom: 1px solid var(--border-subtle);
+    overflow-x: scroll;
+    overflow-y: hidden
   }
 
   .settings-page__nav {

From a37c7b449520341b527b985b6cab7491bb3b2cac Mon Sep 17 00:00:00 2001
From: Ferretosan <129646624+Ferretosan@users.noreply.github.com>
Date: Sat, 1 Aug 2026 17:08:55 +1000
Subject: [PATCH 3/3] add vertical scrolling for horiz scrolling on settings
 nav bar

---
 .../src/pages/settings/Settings.module.css    | 33 ++++++++++++++++++-
 companion/src/pages/settings/Settings.tsx     | 23 +++++++++++--
 2 files changed, 53 insertions(+), 3 deletions(-)

diff --git a/companion/src/pages/settings/Settings.module.css b/companion/src/pages/settings/Settings.module.css
index ac080de..a9519e7 100644
--- a/companion/src/pages/settings/Settings.module.css
+++ b/companion/src/pages/settings/Settings.module.css
@@ -141,7 +141,7 @@
     border-right: 0;
     border-bottom: 1px solid var(--border-subtle);
     overflow-x: scroll;
-    overflow-y: hidden
+    overflow-y: hidden;
   }
 
   .settings-page__nav {
@@ -149,6 +149,37 @@
     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;
   }
diff --git a/companion/src/pages/settings/Settings.tsx b/companion/src/pages/settings/Settings.tsx
index 49cff21..59ce8ac 100644
--- a/companion/src/pages/settings/Settings.tsx
+++ b/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"