Fix CardHeader layout for mobile button visibility

cgen-07a29c85ab2a46eb9f3343a8422120b4
This commit is contained in:
Builder.io 2025-11-14 23:22:36 +00:00
parent cca1c73812
commit 12424253ee

View file

@ -118,9 +118,8 @@ export function FeedItemCard({
armColor.bg, armColor.bg,
"bg-background/70" "bg-background/70"
)}> )}>
<CardHeader className="pb-0 p-4 sm:p-5 lg:p-6"> <CardHeader className="pb-0 p-4 sm:p-5 lg:p-6 !flex !flex-row items-start justify-between gap-3 space-y-0">
<div className="flex items-start justify-between gap-4"> <div className="flex flex-1 items-start gap-3">
<div className="flex flex-1 items-start gap-3">
<Avatar className="h-12 w-12 ring-2 ring-aethex-500/30"> <Avatar className="h-12 w-12 ring-2 ring-aethex-500/30">
<AvatarImage <AvatarImage
src={item.authorAvatar || undefined} src={item.authorAvatar || undefined}
@ -140,8 +139,8 @@ export function FeedItemCard({
</Badge> </Badge>
</div> </div>
</div> </div>
</div> </div>
<Button <Button
size="sm" size="sm"
variant={isFollowing ? "outline" : "default"} variant={isFollowing ? "outline" : "default"}
onClick={() => onToggleFollow(item.authorId)} onClick={() => onToggleFollow(item.authorId)}
@ -153,8 +152,7 @@ export function FeedItemCard({
)} )}
> >
{isFollowing ? "Following" : "Follow"} {isFollowing ? "Following" : "Follow"}
</Button> </Button>
</div>
</CardHeader> </CardHeader>
<CardContent className="space-y-4 sm:space-y-5 lg:space-y-6 p-4 sm:p-5 lg:p-6"> <CardContent className="space-y-4 sm:space-y-5 lg:space-y-6 p-4 sm:p-5 lg:p-6">
{hasMedia && ( {hasMedia && (