From 8e82ded1580ee178d840e8a9aa4888f15a20a86d Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Fri, 17 Oct 2025 23:27:37 +0800
Subject: [PATCH] refine: improve settings dialog layout spacing and fix footer
 visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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)
---
 src/components/settings/SettingsDialog.tsx | 2 +-
 src/components/ui/dialog.tsx               | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/settings/SettingsDialog.tsx b/src/components/settings/SettingsDialog.tsx
index 44d4dcd..24d6a4c 100644
--- a/src/components/settings/SettingsDialog.tsx
+++ b/src/components/settings/SettingsDialog.tsx
@@ -181,7 +181,7 @@ export function SettingsDialog({
             <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
           </div>
         ) : (
-          <div className="flex-1 overflow-y-scroll px-6 min-h-[480px]">
+          <div className="flex-1 overflow-y-scroll px-6 pb-4">
             <Tabs
               value={activeTab}
               onValueChange={setActiveTab}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 88d2405..d404bab 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -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}