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 ( return (
<div <div
className={cn( 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.isDefault ? 'border-primary/30 bg-primary/5' : 'border-border hover:bg-muted/30',
account.paused && 'opacity-75', account.paused && 'opacity-75',
selected && 'ring-2 ring-primary/50 bg-primary/5' selected && 'ring-2 ring-primary/50 bg-primary/5'
)} )}
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between gap-2">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3 min-w-0 flex-1">
{/* Selection checkbox for bulk actions */} {/* Selection checkbox for bulk actions */}
{selectable && ( {selectable && (
<button <button
@@ -281,7 +281,7 @@ export function AccountItem({
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <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" /> <MoreHorizontal className="w-4 h-4" />
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>