From 87cced81952c168eaa4c6fd98059f089d765bcb3 Mon Sep 17 00:00:00 2001
From: kaitranntt <kaitran.ntt@gmail.com>
Date: Wed, 28 Jan 2026 15:11:17 -0500
Subject: [PATCH] fix(ui): fix account card layout overflow

- add min-w-0 flex-1 to left content container for proper shrinking

- add gap-2 between content and dropdown menu

- add shrink-0 to dropdown button to prevent overflow
---
 .../components/cliproxy/provider-editor/account-item.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/cliproxy/provider-editor/account-item.tsx b/ui/src/components/cliproxy/provider-editor/account-item.tsx
index 0fa29685..269e4e8d 100644
--- a/ui/src/components/cliproxy/provider-editor/account-item.tsx
+++ b/ui/src/components/cliproxy/provider-editor/account-item.tsx
@@ -128,14 +128,14 @@ export function AccountItem({
   return (
     <div
       className={cn(
-        'flex flex-col gap-2 p-3 rounded-lg border transition-colors',
+        'flex flex-col gap-2 p-3 rounded-lg border transition-colors overflow-hidden',
         account.isDefault ? 'border-primary/30 bg-primary/5' : 'border-border hover:bg-muted/30',
         account.paused && 'opacity-75',
         selected && 'ring-2 ring-primary/50 bg-primary/5'
       )}
     >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-3">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-3 min-w-0 flex-1">
           {/* Selection checkbox for bulk actions */}
           {selectable && (
             <button
@@ -281,7 +281,7 @@ export function AccountItem({
 
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="h-7 w-7">
+            <Button variant="ghost" size="icon" className="h-7 w-7 shrink-0">
               <MoreHorizontal className="w-4 h-4" />
             </Button>
           </DropdownMenuTrigger>