From 9e14ce999f89052b218d2e3f974644f41355955c Mon Sep 17 00:00:00 2001
From: Anso <dev@saelix.com>
Date: Mon, 30 Mar 2026 17:19:11 -0400
Subject: [PATCH] fix(ui): settings modal sidebar nav clipped on smaller
 viewports (#280)

Add min-h-0 to sidebar container and flex-1 overflow-y-auto to the
nav element so the settings navigation scrolls when items exceed
the available height. Support and About were previously unreachable.
---
 frontend/src/components/SettingsModal.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/SettingsModal.tsx b/frontend/src/components/SettingsModal.tsx
index 27b680b3..1d1292a7 100644
--- a/frontend/src/components/SettingsModal.tsx
+++ b/frontend/src/components/SettingsModal.tsx
@@ -301,14 +301,14 @@ export function SettingsModal({ isOpen, onClose }: SettingsModalProps) {
                 <VisuallyHidden><DialogDescription>Configure Sencho settings</DialogDescription></VisuallyHidden>
 
                 {/* Sidebar */}
-                <div className="w-[200px] bg-glass border-r border-glass-border flex flex-col p-4 shrink-0">
+                <div className="w-[200px] bg-glass border-r border-glass-border flex flex-col p-4 shrink-0 min-h-0">
                     <div className="font-medium text-lg mb-1 text-foreground tracking-tight">Settings Hub</div>
                     {isRemote ? (
                         <div className="text-xs text-muted-foreground mb-5 truncate">{activeNode!.name}</div>
                     ) : (
                         <div className="mb-5" />
                     )}
-                    <nav className="space-y-1.5 flex flex-col">
+                    <nav className="space-y-1.5 flex flex-col flex-1 overflow-y-auto">
                         {/* Account / License */}
                         {!isRemote && (
                             <NavButton section="account" icon={<Shield className="w-4 h-4 mr-2" />} label="Account" />