From 4c91b73592c7defbc3c764f9a698b4fca1c60e64 Mon Sep 17 00:00:00 2001
From: yun-zhi-ztl <15071461069@163.com>
Date: Sun, 15 Mar 2026 13:44:07 +0800
Subject: [PATCH] fix(dialog): center popup content across app

---
 web/src/features/token/create-token-dialog.tsx | 16 ++++++++--------
 web/src/shared/components/confirm-dialog.tsx   |  8 ++++----
 web/src/shared/ui/dialog.tsx                   |  8 ++++----
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/web/src/features/token/create-token-dialog.tsx b/web/src/features/token/create-token-dialog.tsx
index 58cde536..2477df80 100644
--- a/web/src/features/token/create-token-dialog.tsx
+++ b/web/src/features/token/create-token-dialog.tsx
@@ -121,9 +121,9 @@ export function CreateTokenDialog({ children, existingNames = [], onCreated }: C
       <DialogContent>
         {!createdToken ? (
           <>
-            <DialogHeader>
-              <DialogTitle>{t('createToken.title')}</DialogTitle>
-              <DialogDescription>
+            <DialogHeader className="text-center sm:text-center">
+              <DialogTitle className="text-center">{t('createToken.title')}</DialogTitle>
+              <DialogDescription className="text-center">
                 {t('createToken.description')}
               </DialogDescription>
             </DialogHeader>
@@ -198,7 +198,7 @@ export function CreateTokenDialog({ children, existingNames = [], onCreated }: C
             {createMutation.error ? (
               <p className="text-sm text-red-600">{createMutation.error.message}</p>
             ) : null}
-            <DialogFooter>
+            <DialogFooter className="sm:justify-center sm:space-x-3">
               <Button variant="outline" onClick={handleClose}>
                 {t('dialog.cancel')}
               </Button>
@@ -212,9 +212,9 @@ export function CreateTokenDialog({ children, existingNames = [], onCreated }: C
           </>
         ) : (
           <>
-            <DialogHeader>
-              <DialogTitle>{t('createToken.successTitle')}</DialogTitle>
-              <DialogDescription>
+            <DialogHeader className="text-center sm:text-center">
+              <DialogTitle className="text-center">{t('createToken.successTitle')}</DialogTitle>
+              <DialogDescription className="text-center">
                 {t('createToken.successDescription')}
               </DialogDescription>
             </DialogHeader>
@@ -234,7 +234,7 @@ export function CreateTokenDialog({ children, existingNames = [], onCreated }: C
                 <div className="text-sm">{formatExpiresAt(createdToken.expiresAt)}</div>
               </div>
             </div>
-            <DialogFooter>
+            <DialogFooter className="sm:justify-center sm:space-x-3">
               <Button onClick={handleCopyToken}>
                 {t('createToken.copyToken')}
               </Button>
diff --git a/web/src/shared/components/confirm-dialog.tsx b/web/src/shared/components/confirm-dialog.tsx
index 3cb455d9..c61ca284 100644
--- a/web/src/shared/components/confirm-dialog.tsx
+++ b/web/src/shared/components/confirm-dialog.tsx
@@ -42,11 +42,11 @@ export function ConfirmDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          {description && <DialogDescription>{description}</DialogDescription>}
+        <DialogHeader className="text-center sm:text-center">
+          <DialogTitle className="text-center">{title}</DialogTitle>
+          {description && <DialogDescription className="text-center">{description}</DialogDescription>}
         </DialogHeader>
-        <DialogFooter>
+        <DialogFooter className="sm:justify-center sm:space-x-3">
           <Button variant="outline" onClick={() => onOpenChange(false)}>
             {resolvedCancelText}
           </Button>
diff --git a/web/src/shared/ui/dialog.tsx b/web/src/shared/ui/dialog.tsx
index 1512c46d..9518db67 100644
--- a/web/src/shared/ui/dialog.tsx
+++ b/web/src/shared/ui/dialog.tsx
@@ -149,25 +149,25 @@ const DialogContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTML
 DialogContent.displayName = 'DialogContent'
 
 const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
+  <div className={cn('flex flex-col space-y-1.5 text-center', className)} {...props} />
 )
 DialogHeader.displayName = 'DialogHeader'
 
 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
+  <div className={cn('flex flex-col-reverse items-center justify-center gap-2 sm:flex-row', className)} {...props} />
 )
 DialogFooter.displayName = 'DialogFooter'
 
 const DialogTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
   ({ className, ...props }, ref) => (
-    <h2 ref={ref} className={cn('text-xl font-bold font-heading leading-none tracking-tight', className)} {...props} />
+    <h2 ref={ref} className={cn('text-center text-xl font-bold font-heading leading-none tracking-tight', className)} {...props} />
   )
 )
 DialogTitle.displayName = 'DialogTitle'
 
 const DialogDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
   ({ className, ...props }, ref) => (
-    <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
+    <p ref={ref} className={cn('text-center text-sm text-muted-foreground', className)} {...props} />
   )
 )
 DialogDescription.displayName = 'DialogDescription'