refine: improve settings dialog layout spacing and fix footer visibility

This commit refines the visual hierarchy and fixes layout issues in the
settings dialog:

1. Add visual separators to dialog sections:
   - Add bottom border and background to DialogHeader
   - Both header and footer now have consistent border + bg-muted/20 styling
   - Creates clear three-section layout: header | content | footer

2. Fix footer overflow issue:
   - Remove min-h-[480px] from content area that conflicted with max-h-[90vh]
   - Keep min-h-[400px] on TabsContent to prevent height jumps
   - Add flex-shrink-0 to header and footer to ensure they stay visible
   - Content area uses flex-1 to fill remaining space naturally

3. Improve spacing:
   - Add pb-4 to content area for breathing room above footer
   - Add pb-4 to DialogHeader for consistent spacing below title
   - Ensure proper padding hierarchy across all dialog sections

Layout calculation (small screens, 90vh ≈ 540px):
- Header: ~70px (fixed)
- Content: 400px minimum, scrollable (flexible)
- Footer: ~70px (fixed)
- Total: ≤ 540px, footer always visible ✓

Files modified:
- src/components/ui/dialog.tsx (DialogHeader, DialogFooter styling)
- src/components/settings/SettingsDialog.tsx (content area height constraint)
This commit is contained in:
Jason
2025-10-17 23:27:37 +08:00
parent c04f636bbe
commit 8e82ded158
2 changed files with 3 additions and 3 deletions

View File

@@ -78,7 +78,7 @@ const DialogHeader = ({
}: React.HTMLAttributes<HTMLDivElement>) => (
<div
className={cn(
"flex flex-col space-y-1.5 text-center sm:text-left px-6 pt-6",
"flex flex-col space-y-1.5 text-center sm:text-left px-6 pt-6 pb-4 border-b border-border bg-muted/20 flex-shrink-0",
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 px-6 pb-6 pt-4 border-t border-border bg-muted/20",
"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 flex-shrink-0",
className,
)}
{...props}