From 604a73766fed3de19e28f7cae996dcd393620b91 Mon Sep 17 00:00:00 2001
From: "Builder.io" <builder-bot@builder.io>
Date: Fri, 14 Nov 2025 23:14:58 +0000
Subject: [PATCH] completionId: cgen-4a62901a514e44dba9800d4be88535e6

cgen-4a62901a514e44dba9800d4be88535e6
---
 client/components/social/FeedItemCard.tsx | 70 +++++++++++------------
 1 file changed, 34 insertions(+), 36 deletions(-)

diff --git a/client/components/social/FeedItemCard.tsx b/client/components/social/FeedItemCard.tsx
index ba3ad59e..831e1f11 100644
--- a/client/components/social/FeedItemCard.tsx
+++ b/client/components/social/FeedItemCard.tsx
@@ -118,21 +118,21 @@ export function FeedItemCard({
       armColor.bg,
       "bg-background/70"
     )}>
-      <CardHeader className="pb-0 p-3 sm:p-4 lg:p-6">
-        <div className="flex items-start justify-between gap-2 sm:gap-3 lg:gap-4">
-          <div className="flex flex-1 items-start gap-2 sm:gap-3">
-            <Avatar className="h-10 sm:h-12 w-10 sm:w-12 ring-2 ring-aethex-500/30 flex-shrink-0">
+      <CardHeader className="pb-0 p-4 sm:p-5 lg:p-6">
+        <div className="flex items-start justify-between gap-3 sm:gap-4">
+          <div className="flex flex-1 items-start gap-3 sm:gap-4">
+            <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-xs sm:text-sm">
+              <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-1 sm:gap-2 flex-wrap">
-                <CardTitle className="text-sm sm:text-base lg:text-lg font-semibold text-foreground truncate">
+              <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)}>
@@ -156,7 +156,7 @@ export function FeedItemCard({
           </Button>
         </div>
       </CardHeader>
-      <CardContent className="space-y-3 sm:space-y-4 lg:space-y-5 p-3 sm:p-4 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 && (
           <div className="relative w-full overflow-hidden rounded-xl sm:rounded-2xl border border-border/40 bg-black/70 aspect-video max-h-96">
             {item.mediaType === "video" ? (
@@ -193,22 +193,22 @@ export function FeedItemCard({
         )}
 
         {item.caption && (
-          <p className="text-xs sm:text-sm leading-relaxed text-muted-foreground">
+          <p className="text-sm leading-relaxed text-muted-foreground">
             {item.caption}
           </p>
         )}
 
-        <div className="rounded-xl sm:rounded-2xl border border-border/40 bg-background/80 p-2 sm:p-3 lg:p-4">
-          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-3 text-xs sm:text-sm text-muted-foreground">
-            <div className="flex items-center gap-1 sm:gap-2 flex-wrap">
+        <div className="rounded-2xl border border-border/40 bg-background/80 p-4">
+          <div className="flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground">
+            <div className="flex items-center gap-3">
               <Button
                 variant="ghost"
                 size="sm"
-                className="gap-1 sm:gap-2 h-8 px-2 sm:px-3"
+                className="gap-2 pl-2 pr-3"
                 onClick={() => onLike(item.id)}
               >
-                <Heart className="h-3 sm:h-4 w-3 sm:w-4 text-aethex-400" />
-                <span className="font-medium text-foreground text-xs sm:text-sm">
+                <Heart className="h-4 w-4 text-aethex-400" />
+                <span className="font-medium text-foreground">
                   {item.likes.toLocaleString()}
                 </span>
                 <span className="hidden sm:inline">Like</span>
@@ -216,20 +216,20 @@ export function FeedItemCard({
               <Button
                 variant="ghost"
                 size="sm"
-                className="gap-1 sm:gap-2 h-8 px-2 sm:px-3"
+                className="gap-2 pl-2 pr-3"
                 onClick={() => setShowComments((s) => !s)}
               >
-                <MessageCircle className="h-3 sm:h-4 w-3 sm:w-4 text-aethex-400" />
-                <span className="font-medium text-foreground text-xs sm:text-sm">
+                <MessageCircle className="h-4 w-4 text-aethex-400" />
+                <span className="font-medium text-foreground">
                   {item.comments.toLocaleString()}
                 </span>
                 <span className="hidden sm:inline">Comment</span>
               </Button>
             </div>
-            <div className="flex items-center gap-1 sm:gap-2">
+            <div className="flex items-center gap-2">
               <Badge
                 variant="outline"
-                className="border-border/60 bg-background/60 text-xs uppercase tracking-wide px-2 py-0.5"
+                className="border-border/60 bg-background/60 text-xs uppercase tracking-wide"
               >
                 {item.mediaType === "video"
                   ? "Video"
@@ -237,51 +237,51 @@ export function FeedItemCard({
                     ? "Image"
                     : "Update"}
               </Badge>
-              <Separator orientation="vertical" className="h-4 sm:h-5" />
+              <Separator orientation="vertical" className="h-6" />
               <Button
                 variant="ghost"
                 size="sm"
-                className="gap-1 sm:gap-2 h-8 px-2 sm:px-3"
+                className="gap-2 pl-2 pr-3"
                 onClick={() => onShare(item.id)}
               >
-                <Share2 className="h-3 sm:h-4 w-3 sm:w-4" />
-                <span className="hidden sm:inline">Share</span>
+                <Share2 className="h-4 w-4" />
+                Share
               </Button>
             </div>
           </div>
         </div>
 
         {showComments && (
-          <div className="rounded-xl sm:rounded-2xl border border-border/40 bg-background/80 p-3 sm:p-4 space-y-2 sm:space-y-3">
+          <div className="rounded-2xl border border-border/40 bg-background/80 p-4 space-y-3">
             <div className="space-y-2 max-h-60 overflow-auto pr-1">
               {loadingComments ? (
                 <p className="text-sm text-muted-foreground">
                   Loading comments…
                 </p>
               ) : comments.length === 0 ? (
-                <p className="text-xs sm:text-sm text-muted-foreground">
+                <p className="text-sm text-muted-foreground">
                   Be the first to comment.
                 </p>
               ) : (
                 comments.map((c) => (
-                  <div key={c.id} className="flex items-start gap-2 sm:gap-3 text-xs sm:text-sm">
-                    <Avatar className="h-6 sm:h-8 w-6 sm:w-8 flex-shrink-0">
+                  <div key={c.id} className="flex items-start gap-3">
+                    <Avatar className="h-8 w-8">
                       <AvatarImage
                         src={c.user_profiles?.avatar_url || undefined}
                       />
-                      <AvatarFallback className="text-xs">
+                      <AvatarFallback>
                         {(c.user_profiles?.full_name ||
                           c.user_profiles?.username ||
                           "U")[0]?.toUpperCase() || "U"}
                       </AvatarFallback>
                     </Avatar>
-                    <div className="min-w-0 flex-1">
-                      <div className="font-medium text-foreground">
+                    <div>
+                      <div className="text-sm font-medium">
                         {c.user_profiles?.full_name ||
                           c.user_profiles?.username ||
                           "Member"}
                       </div>
-                      <div className="text-foreground/90 whitespace-pre-wrap break-words">
+                      <div className="text-sm text-foreground/90 whitespace-pre-wrap">
                         {c.content}
                       </div>
                     </div>
@@ -289,18 +289,16 @@ export function FeedItemCard({
                 ))
               )}
             </div>
-            <div className="flex flex-col sm:flex-row items-end gap-2 sm:gap-3">
+            <div className="flex items-start gap-3">
               <Textarea
                 placeholder="Write a comment…"
                 value={commentText}
                 onChange={(e) => setCommentText(e.target.value)}
-                className="min-h-[36px] sm:min-h-[44px] text-sm flex-1 resize-none"
+                className="min-h-[44px]"
               />
               <Button
                 onClick={submitComment}
                 disabled={submittingComment || !commentText.trim()}
-                size="sm"
-                className="text-xs sm:text-sm px-3 h-9 sm:h-auto whitespace-nowrap"
               >
                 {submittingComment ? "Posting…" : "Post"}
               </Button>