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:
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user