admin/cc-switch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: redesign settings dialog layout to prevent content overflow and visual jitter

Browse Source 
Fixed multiple layout issues in the settings dialog:

1. Dialog structure: Changed from grid to flexbox layout
   - Removed global padding from DialogContent
   - Added individual padding to DialogHeader (px-6 pt-6) and DialogFooter (px-6 pb-6 pt-4)
   - Added max-h-[90vh] constraint to prevent dialog from exceeding viewport

2. Content area improvements:
   - Replaced max-h-[70vh] with flex-1 for better space utilization
   - Set min-h-[480px] on content wrapper to maintain consistent dialog height
   - Applied min-h-[400px] to all TabsContent components to prevent height jumps

3. Scrollbar optimization:
   - Changed overflow-y-auto to overflow-y-scroll to force scrollbar gutter
   - Eliminates horizontal shift when switching between tabs with different content heights
   - Consistent with main app layout approach (App.tsx)

4. Footer enhancement:
   - Added border-t and bg-muted/20 for visual separation
   - Fixed footer overlapping content in advanced tab

Result: Settings dialog now displays all content properly without requiring
fullscreen, maintains consistent height across tabs, and eliminates layout shift
when switching tabs.
This commit is contained in:
Jason
2025-10-17 23:09:21 +08:00
parent f5c6363dee
commit c04f636bbe
2 changed files with 66 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/ui/dialog.tsx
View File

@@ -55,7 +55,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-1/2 top-1/2 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white dark:bg-gray-900 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
"fixed left-1/2 top-1/2 flex flex-col w-full max-w-lg max-h-[90vh] translate-x-[-50%] translate-y-[-50%] border bg-white dark:bg-gray-900 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
zIndexMap[zIndex],
className,
)}
@@ -78,7 +78,7 @@ const DialogHeader = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left",
"flex flex-col space-y-1.5 text-center sm:text-left px-6 pt-6",
className,
)}
{...props}
@@ -92,7 +92,7 @@ const DialogFooter = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 px-6 pb-6 pt-4 border-t border-border bg-muted/20",
className,
)}
{...props}