From a5fff9373216c4534a01bdfdd029da12a86e8feb Mon Sep 17 00:00:00 2001
From: Jason <farion1231@gmail.com>
Date: Sun, 19 Oct 2025 10:35:37 +0800
Subject: [PATCH] fix: improve dialog vertical alignment and spacing
 consistency
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix multiple alignment and spacing issues in dialog components to ensure
proper visual balance and symmetry across all dialog elements.

Changes to DialogHeader:
- Change padding from pt-6 pb-4 to py-5 for symmetric vertical spacing
- Ensures header content is equidistant from top and bottom borders

Changes to DialogFooter:
- Change padding from pt-4 pb-6 to py-5 for symmetric vertical spacing
- Replace sm:space-x-2 with gap-2 for consistent button spacing at all breakpoints
- Add sm:items-center to vertically center buttons in horizontal layout
- Ensures footer buttons align properly and are equidistant from borders

Changes to DialogTitle:
- Change line-height from leading-none to leading-tight (1 → 1.25)
- Provides better visual balance with button heights
- Improves readability and alignment with adjacent buttons

Impact:
All dialog components now have:
- Symmetric vertical padding (1.25rem top/bottom)
- Properly centered content regardless of viewport size
- Consistent button spacing and alignment
- Better visual harmony between text and interactive elements
---
 src/components/ui/dialog.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index d404bab..757b196 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 pb-4 border-b border-border bg-muted/20 flex-shrink-0",
+      "flex flex-col space-y-1.5 text-center sm:text-left px-6 py-5 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-shrink-0",
+      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end sm:items-center px-6 py-5 border-t border-border bg-muted/20 flex-shrink-0",
       className,
     )}
     {...props}
@@ -107,7 +107,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "text-lg font-semibold leading-tight tracking-tight",
       className,
     )}
     {...props}