Jason 8e82ded158 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)

2025-10-17 23:27:37 +08:00

4.3 KiB

Raw Blame History

View Raw