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:
@@ -78,7 +78,7 @@ const DialogHeader = ({
|
|||||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
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,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -92,7 +92,7 @@ const DialogFooter = ({
|
|||||||
}: React.HTMLAttributes<HTMLDivElement>) => (
|
}: React.HTMLAttributes<HTMLDivElement>) => (
|
||||||
<div
|
<div
|
||||||
className={cn(
|
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,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
@@ -107,7 +107,7 @@ const DialogTitle = React.forwardRef<
|
|||||||
<DialogPrimitive.Title
|
<DialogPrimitive.Title
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className={cn(
|
className={cn(
|
||||||
"text-lg font-semibold leading-none tracking-tight",
|
"text-lg font-semibold leading-tight tracking-tight",
|
||||||
className,
|
className,
|
||||||
)}
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
|
|||||||
Reference in New Issue
Block a user