From df69e6eb18cca238ec141bf02ee24beda321cf21 Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 4 Mar 2026 20:20:31 +0200
Subject: [PATCH 1/2] change shortcuts visibility on mobile

---
 src/routes/Settings/Menu/Menu.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/routes/Settings/Menu/Menu.tsx b/src/routes/Settings/Menu/Menu.tsx
index 33cf41dc0..5bc5208f1 100644
--- a/src/routes/Settings/Menu/Menu.tsx
+++ b/src/routes/Settings/Menu/Menu.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useServices } from 'stremio/services';
 import { Button } from 'stremio/components';
 import { SECTIONS } from '../constants';
+import { usePlatform } from 'stremio/common';
 import styles from './Menu.less';
 
 type Props = {
@@ -15,6 +16,7 @@ type Props = {
 const Menu = ({ selected, streamingServer, onSelect }: Props) => {
     const { t } = useTranslation();
     const { shell } = useServices();
+    const platform = usePlatform();
 
     const settings = useMemo(() => (
         streamingServer?.settings?.type === 'Ready' ?
@@ -35,9 +37,9 @@ const Menu = ({ selected, streamingServer, onSelect }: Props) => {
             <Button className={classNames(styles['button'], { [styles['selected']]: selected === SECTIONS.STREAMING })} title={t('SETTINGS_NAV_STREAMING')} data-section={SECTIONS.STREAMING} onClick={onSelect}>
                 { t('SETTINGS_NAV_STREAMING') }
             </Button>
-            <Button className={classNames(styles['button'], { [styles['selected']]: selected === SECTIONS.SHORTCUTS })} title={t('SETTINGS_NAV_SHORTCUTS')} data-section={SECTIONS.SHORTCUTS} onClick={onSelect}>
+            { !platform.isMobile && <Button className={classNames(styles['button'], { [styles['selected']]: selected === SECTIONS.SHORTCUTS })} title={t('SETTINGS_NAV_SHORTCUTS')} data-section={SECTIONS.SHORTCUTS} onClick={onSelect}>
                 { t('SETTINGS_NAV_SHORTCUTS') }
-            </Button>
+            </Button> }
 
             <div className={styles['spacing']} />
             <div className={styles['version-info-label']} title={process.env.VERSION}>

From 3d119db0494b75235d4813f49b2829ecda4576ee Mon Sep 17 00:00:00 2001
From: "Timothy Z." <timothy@stremio.com>
Date: Wed, 4 Mar 2026 20:48:01 +0200
Subject: [PATCH 2/2] improve selected section logic for edge cases

---
 src/routes/Settings/Settings.tsx | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/routes/Settings/Settings.tsx b/src/routes/Settings/Settings.tsx
index 727da9e82..2dd3a793a 100644
--- a/src/routes/Settings/Settings.tsx
+++ b/src/routes/Settings/Settings.tsx
@@ -41,13 +41,27 @@ const Settings = () => {
 
     const updateSelectedSectionId = useCallback(() => {
         const container = sectionsContainerRef.current;
-        for (const section of sections) {
-            const sectionContainer = section.ref.current;
-            if (sectionContainer && (sectionContainer.offsetTop + container!.offsetTop) < container!.scrollTop + 50) {
-                setSelectedSectionId(section.id);
-            }
+        if (!container) return;
+
+        const availableSections = sections.filter((section) => section.ref.current);
+        if (!availableSections.length) return;
+
+        const { scrollTop, clientHeight, scrollHeight, offsetTop } = container;
+        const isAtBottom = scrollTop + clientHeight >= scrollHeight - 10;
+
+        if (isAtBottom) {
+            setSelectedSectionId(availableSections[availableSections.length - 1].id);
+            return;
         }
-    }, []);
+
+        const marker = scrollTop + 50;
+        const activeSection = availableSections.reduce((current, section) => {
+            const sectionTop = section.ref.current!.offsetTop + offsetTop;
+            return sectionTop <= marker ? section : current;
+        }, availableSections[0]);
+
+        setSelectedSectionId(activeSection.id);
+    }, [sections]);
 
     const onMenuSelect = useCallback((event: React.MouseEvent<HTMLDivElement>) => {
         const section = sections.find((section) => {
@@ -55,11 +69,11 @@ const Settings = () => {
         });
 
         const container = sectionsContainerRef.current;
-        section && container!.scrollTo({
+        section && container?.scrollTo({
             top: section.ref.current!.offsetTop - container!.offsetTop,
             behavior: 'smooth'
         });
-    }, []);
+    }, [sections]);
 
     const onContainerScroll = useCallback(throttle(() => {
         updateSelectedSectionId();