xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-06-16 10:46:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(web): fixed-height settings dialog, narrower sidebar

Browse Source 
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.
This commit is contained in:
RockChinQ
2026-06-16 05:22:42 -04:00
parent b3c00fe6da
commit 716d7aca94
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
web/src/app/home/components/settings-dialog/SettingsDialog.tsx
View File

@@ -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) => (