From cca1c73812c0d980aef5779c016d5aa65e217125 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Fri, 14 Nov 2025 23:20:46 +0000
Subject: [PATCH] completionId: cgen-d112d2df411a48a2bf461f5a375524e9

cgen-d112d2df411a48a2bf461f5a375524e9
---
 client/components/social/FeedItemCard.tsx | 66 ++++++++++++-----------
 1 file changed, 34 insertions(+), 32 deletions(-)

diff --git a/client/components/social/FeedItemCard.tsx b/client/components/social/FeedItemCard.tsx
index 897f8abe..fde6e692 100644
--- a/client/components/social/FeedItemCard.tsx
+++ b/client/components/social/FeedItemCard.tsx
@@ -118,41 +118,43 @@ export function FeedItemCard({
       armColor.bg,
       "bg-background/70"
     )}>
-      <CardHeader className="pb-0 px-3 py-3 sm:p-5 lg:p-6 !flex !flex-row items-start justify-between gap-2 sm:gap-3 space-y-0">
-        <div className="flex flex-1 items-start gap-2 sm:gap-3 min-w-0">
-          <Avatar className="h-12 w-12 ring-2 ring-aethex-500/30 flex-shrink-0">
-            <AvatarImage
-              src={item.authorAvatar || undefined}
-              alt={item.authorName}
-            />
-            <AvatarFallback className="bg-aethex-500/10 text-aethex-300 text-sm">
-              {item.authorName?.[0]?.toUpperCase() || "U"}
-            </AvatarFallback>
-          </Avatar>
-          <div className="min-w-0 flex-1 space-y-1">
-            <div className="flex items-center gap-2 flex-wrap">
-              <CardTitle className="text-base sm:text-lg lg:text-lg font-semibold text-foreground">
-                {item.authorName}
-              </CardTitle>
-              <Badge className={cn("text-xs font-bold uppercase px-2 py-0.5", armColor.badge)}>
-                {armLabel}
-              </Badge>
+      <CardHeader className="pb-0 p-4 sm:p-5 lg:p-6">
+        <div className="flex items-start justify-between gap-4">
+          <div className="flex flex-1 items-start gap-3">
+            <Avatar className="h-12 w-12 ring-2 ring-aethex-500/30">
+              <AvatarImage
+                src={item.authorAvatar || undefined}
+                alt={item.authorName}
+              />
+              <AvatarFallback className="bg-aethex-500/10 text-aethex-300">
+                {item.authorName?.[0]?.toUpperCase() || "U"}
+              </AvatarFallback>
+            </Avatar>
+            <div className="min-w-0 flex-1 space-y-1">
+              <div className="flex items-center gap-2 flex-wrap">
+                <CardTitle className="text-lg font-semibold text-foreground">
+                  {item.authorName}
+                </CardTitle>
+                <Badge className={cn("text-xs font-bold uppercase", armColor.badge)}>
+                  {armLabel}
+                </Badge>
+              </div>
             </div>
           </div>
+          <Button
+            size="sm"
+            variant={isFollowing ? "outline" : "default"}
+            onClick={() => onToggleFollow(item.authorId)}
+            className={cn(
+              "rounded-full border-border/60",
+              isFollowing
+                ? "bg-background/80 text-foreground"
+                : "bg-gradient-to-r from-aethex-500 to-neon-blue text-white",
+            )}
+          >
+            {isFollowing ? "Following" : "Follow"}
+          </Button>
         </div>
-        <Button
-          size="sm"
-          variant={isFollowing ? "outline" : "default"}
-          onClick={() => onToggleFollow(item.authorId)}
-          className={cn(
-            "rounded-full border-border/60 flex-shrink-0 text-xs h-8 sm:h-9 px-2.5 sm:px-4 whitespace-nowrap",
-            isFollowing
-              ? "bg-background/80 text-foreground border-border/60"
-              : "bg-gradient-to-r from-aethex-500 to-neon-blue text-white",
-          )}
-        >
-          {isFollowing ? "Following" : "Follow"}
-        </Button>
       </CardHeader>
       <CardContent className="space-y-4 sm:space-y-5 lg:space-y-6 p-4 sm:p-5 lg:p-6">
         {hasMedia && (