fix(dialog): center popup content across app

This commit is contained in:
yun-zhi-ztl 2026-03-15 13:44:07 +08:00
parent d6608e4b29
commit 4c91b73592
3 changed files with 16 additions and 16 deletions

View file

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

View file

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

View file

@ -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'