From bd8ef13cbb81c09b078b393add41290a0c19011a Mon Sep 17 00:00:00 2001
From: xiose <huyanlin@nuaa.edu.cn>
Date: Mon, 16 Mar 2026 14:16:52 +0800
Subject: [PATCH] fix(web): prevent text overflow in token dialogs

Add responsive text wrapping and overflow handling to token-related
components to prevent layout breaking with long token names or descriptions.

Changes:
- Add min-w-0 to dialog headers to allow flex shrinking
- Add break-all/break-words to prevent text overflow
- Add overflow-hidden to token display container
- Apply max-w-48 constraint to token name column
---
 web/src/features/token/create-token-dialog.tsx | 10 +++++-----
 web/src/features/token/token-list.tsx          |  6 +++---
 web/src/shared/components/confirm-dialog.tsx   |  4 ++--
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/web/src/features/token/create-token-dialog.tsx b/web/src/features/token/create-token-dialog.tsx
index 8d967f72..ca167fb6 100644
--- a/web/src/features/token/create-token-dialog.tsx
+++ b/web/src/features/token/create-token-dialog.tsx
@@ -210,22 +210,22 @@ export function CreateTokenDialog({ children, existingNames = [] }: CreateTokenD
           </>
         ) : (
           <>
-            <DialogHeader className="text-center sm:text-center">
+            <DialogHeader className="min-w-0 text-center sm:text-center">
               <DialogTitle className="text-center">{t('createToken.successTitle')}</DialogTitle>
-              <DialogDescription className="text-center">
+              <DialogDescription className="text-center break-words">
                 {t('createToken.successDescription')}
               </DialogDescription>
             </DialogHeader>
-            <div className="space-y-4 py-4">
+            <div className="min-w-0 space-y-4 py-4">
               <div className="space-y-2">
                 <Label>{t('createToken.tokenLabel')}</Label>
-                <div className="rounded-md bg-muted p-3 font-mono text-sm break-all">
+                <div className="overflow-hidden rounded-md bg-muted p-3 font-mono text-sm break-all">
                   {createdToken.token}
                 </div>
               </div>
               <div className="space-y-2">
                 <Label>{t('createToken.nameDisplay')}</Label>
-                <div className="text-sm">{createdToken.name}</div>
+                <div className="text-sm break-all">{createdToken.name}</div>
               </div>
               <div className="space-y-2">
                 <Label>{t('createToken.expiresAtDisplay')}</Label>
diff --git a/web/src/features/token/token-list.tsx b/web/src/features/token/token-list.tsx
index 561bd5bc..c2110064 100644
--- a/web/src/features/token/token-list.tsx
+++ b/web/src/features/token/token-list.tsx
@@ -204,7 +204,7 @@ export function TokenList() {
             <TableBody>
               {tokens.map((token) => (
                 <TableRow key={token.id}>
-                  <TableCell className="font-medium">{token.name}</TableCell>
+                  <TableCell className="font-medium max-w-48 break-all">{token.name}</TableCell>
                   <TableCell>
                     <code className="text-sm bg-muted px-2 py-1 rounded">
                       {token.tokenPrefix}...
@@ -257,9 +257,9 @@ export function TokenList() {
 
       <Dialog open={expirationDialog.open} onOpenChange={(open) => setExpirationDialog((current) => ({ ...current, open }))}>
         <DialogContent>
-          <DialogHeader>
+          <DialogHeader className="min-w-0">
             <DialogTitle>{t('token.editExpirationTitle')}</DialogTitle>
-            <DialogDescription>
+            <DialogDescription className="break-all">
               {t('token.editExpirationDescription', { name: expirationDialog.tokenName })}
             </DialogDescription>
           </DialogHeader>
diff --git a/web/src/shared/components/confirm-dialog.tsx b/web/src/shared/components/confirm-dialog.tsx
index c61ca284..5da8dea0 100644
--- a/web/src/shared/components/confirm-dialog.tsx
+++ b/web/src/shared/components/confirm-dialog.tsx
@@ -42,9 +42,9 @@ export function ConfirmDialog({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent>
-        <DialogHeader className="text-center sm:text-center">
+        <DialogHeader className="min-w-0 text-center sm:text-center">
           <DialogTitle className="text-center">{title}</DialogTitle>
-          {description && <DialogDescription className="text-center">{description}</DialogDescription>}
+          {description && <DialogDescription className="text-center break-all">{description}</DialogDescription>}
         </DialogHeader>
         <DialogFooter className="sm:justify-center sm:space-x-3">
           <Button variant="outline" onClick={() => onOpenChange(false)}>