fix: improve dialog vertical alignment and spacing consistency

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
This commit is contained in:
Jason
2025-10-19 10:35:37 +08:00
parent 5253e7ec37
commit a5fff93732

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 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}