From 716d7aca947e02b8eb3831bea0fd5798550aeea8 Mon Sep 17 00:00:00 2001
From: RockChinQ <rockchinq@gmail.com>
Date: Tue, 16 Jun 2026 05:22:42 -0400
Subject: [PATCH] fix(web): fixed-height settings dialog, narrower sidebar

Pin the dialog to a fixed 80vh (cap 800px) so switching sections no
longer resizes it; panels scroll their own content internally. Override
the SidebarProvider wrapper's default h-svh with h-full so both columns
fill the dialog height. Narrow the inner settings sidebar to w-44.
---
 .../components/settings-dialog/SettingsDialog.tsx  | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/app/home/components/settings-dialog/SettingsDialog.tsx b/web/src/app/home/components/settings-dialog/SettingsDialog.tsx
index 9b24b9e2..52b799c3 100644
--- a/web/src/app/home/components/settings-dialog/SettingsDialog.tsx
+++ b/web/src/app/home/components/settings-dialog/SettingsDialog.tsx
@@ -116,19 +116,21 @@ export default function SettingsDialog({
       }}
     >
       <DialogContent
-        className="overflow-hidden p-0 sm:max-w-[52rem] [&>button:last-child]:z-20"
-        // The dialog itself is the scroll boundary; each panel manages its own
-        // internal scrolling.
+        className="h-[80vh] max-h-[800px] overflow-hidden p-0 sm:max-w-[52rem] [&>button:last-child]:z-20"
+        // Fixed height so switching sections never resizes the dialog; each
+        // panel scrolls its own content internally.
       >
         <DialogTitle className="sr-only">
           {t('settingsDialog.title')}
         </DialogTitle>
         <DialogDescription className="sr-only">{activeLabel}</DialogDescription>
 
-        <SidebarProvider className="items-start">
+        {/* Override the SidebarProvider wrapper's default h-svh so the two
+            columns fill the dialog's fixed height instead of the viewport. */}
+        <SidebarProvider className="!min-h-0 h-full">
           <Sidebar
             collapsible="none"
-            className="hidden h-[620px] max-h-[85vh] w-56 shrink-0 border-r md:flex"
+            className="hidden h-full w-44 shrink-0 border-r md:flex"
           >
             <SidebarContent>
               <SidebarGroup>
@@ -154,7 +156,7 @@ export default function SettingsDialog({
             </SidebarContent>
           </Sidebar>
 
-          <main className="flex h-[620px] max-h-[85vh] min-w-0 flex-1 flex-col overflow-hidden">
+          <main className="flex h-full min-w-0 flex-1 flex-col overflow-hidden">
             {/* Mobile section switcher (sidebar is hidden on small screens) */}
             <div className="flex shrink-0 items-center gap-1 overflow-x-auto border-b px-3 py-2 md:hidden">
               {navItems.map((item) => (