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
This commit is contained in:
kaitranntt
2026-01-28 15:11:17 -05:00
parent aeb9abc998
commit 87cced8195
@@ -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>