fix: stabilize kumo ui components

modules/shared/components/AppShell.tsx

@@ -192,6 +192,17 @@ export function AppShell({ children, account, permissions }: AppShellProps): Rea
               ))}
             </div>
           </nav>
+
+          <div className="border-t p-3">
+            <div className="flex min-w-0 items-center gap-3 rounded-md bg-secondary/55 p-2">
+              <UserAvatar avatarUrl={account.avatarUrl} name={account.name} size="sm" />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm font-medium leading-tight">{account.name}</p>
+                <p className="truncate text-xs leading-tight text-muted-foreground">{account.email}</p>
+              </div>
+            </div>
+            <SignOutButton className="mt-2 w-full justify-start" />
+          </div>
         </div>
       </aside>
 
@@ -205,12 +216,12 @@ export function AppShell({ children, account, permissions }: AppShellProps): Rea
               <p className="text-sm font-medium">工作台</p>
             </div>
           </div>
-          <div className="flex items-center gap-2">
-            <div className="hidden items-center gap-2 sm:flex">
-              <div className="text-right">
-                <p className="text-sm font-medium">{account.name}</p>
-                <p className="text-xs text-muted-foreground">{account.email}</p>
-              </div>
+          <div className="flex min-w-0 items-center gap-2 xl:hidden">
+            <div className="hidden min-w-0 items-center gap-2 sm:flex">
+              <p className="min-w-0 max-w-[min(52vw,24rem)] truncate whitespace-nowrap text-right text-sm leading-tight">
+                <span className="font-medium">{account.name}</span>
+                <span className="ml-2 text-muted-foreground">{account.email}</span>
+              </p>
               <UserAvatar avatarUrl={account.avatarUrl} name={account.name} size="sm" />
             </div>
             <SignOutButton />