xinyin025/LangBot
1
0
Fork 0
mirror of https://github.com/langbot-app/LangBot.git synced 2026-08-13 06:00:58 +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
web/src/app/home/components/settings-dialog/SettingsDialog.tsx
+8 -6
View File
@@ -116,19 +116,21 @@ export default function SettingsDialog({
}} }}
> >
<DialogContent <DialogContent
className="overflow-hidden p-0 sm:max-w-[52rem] [&>button:last-child]:z-20" className="h-[80vh] max-h-[800px] 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 // Fixed height so switching sections never resizes the dialog; each
// internal scrolling. // panel scrolls its own content internally.
> >
<DialogTitle className="sr-only"> <DialogTitle className="sr-only">
{t('settingsDialog.title')} {t('settingsDialog.title')}
</DialogTitle> </DialogTitle>
<DialogDescription className="sr-only">{activeLabel}</DialogDescription> <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 <Sidebar
collapsible="none" 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> <SidebarContent>
<SidebarGroup> <SidebarGroup>
@@ -154,7 +156,7 @@ export default function SettingsDialog({
</SidebarContent> </SidebarContent>
</Sidebar> </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) */} {/* 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"> <div className="flex shrink-0 items-center gap-1 overflow-x-auto border-b px-3 py-2 md:hidden">
{navItems.map((item) => ( {navItems.map((item) => (