From bcc167d7c20e451183a31c74b1c1dabe9bd12cf5 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 24 May 2026 08:18:02 +0530
Subject: [PATCH] fix: collapsed post card single-row layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Collapsed state now fits entirely in one row:
  [avatar] [name] · [truncated text] [tiny thumbnail] [▼]
No second row needed. Expanded state shows the normal two-line
author block (name + time) as before.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/app/circle/[id]/page.tsx | 41 ++++++++++++++++--------------------
 1 file changed, 18 insertions(+), 23 deletions(-)

diff --git a/src/app/circle/[id]/page.tsx b/src/app/circle/[id]/page.tsx
index 4a97bad..f714d37 100644
--- a/src/app/circle/[id]/page.tsx
+++ b/src/app/circle/[id]/page.tsx
@@ -120,11 +120,23 @@ function PostCard({
           className="flex items-center gap-2 flex-1 min-w-0 text-left"
         >
           <div className="w-8 h-8 bg-rose-100 dark:bg-rose-900/40 rounded-full flex items-center justify-center text-sm flex-shrink-0">👨‍👩‍👧</div>
-          <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium">{post.authorFamilyName}</p>
-            <p className="text-xs text-gray-400">{timeAgo(post.createdAt)}{post.sourceKind ? ` · shared a ${post.sourceKind}` : ""}</p>
-          </div>
-          <span className="text-gray-300 text-xs flex-shrink-0 ml-2">{collapsed ? "▼" : "▲"}</span>
+          {collapsed ? (
+            /* Single-row collapsed: name · preview text · thumbnail · chevron */
+            <>
+              <span className="text-sm font-medium flex-shrink-0">{post.authorFamilyName}</span>
+              {(post.body || post.imageUrl) && <span className="text-gray-300 text-xs flex-shrink-0">·</span>}
+              {post.body && <span className="text-xs text-gray-400 truncate flex-1 min-w-0">{post.body}</span>}
+              {!post.body && <span className="flex-1" />}
+              {post.imageUrl && <img src={post.imageUrl} alt="" className="w-7 h-7 rounded-md object-cover flex-shrink-0" />}
+            </>
+          ) : (
+            /* Expanded: two-line author block */
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium">{post.authorFamilyName}</p>
+              <p className="text-xs text-gray-400">{timeAgo(post.createdAt)}{post.sourceKind ? ` · shared a ${post.sourceKind}` : ""}</p>
+            </div>
+          )}
+          <span className="text-gray-300 text-xs flex-shrink-0 ml-1">{collapsed ? "▼" : "▲"}</span>
         </button>
         {/* ⋯ menu — rendered outside overflow:hidden so it doesn't get clipped */}
         <div className="relative">
@@ -158,24 +170,7 @@ function PostCard({
         </div>
       </div>
 
-      {/* Collapsed preview row — centered under author line */}
-      {collapsed && (post.body || post.imageUrl) && (
-        <button
-          onClick={() => setCollapsed(false)}
-          className="w-full flex items-center justify-center gap-2 px-4 pb-3 border-t border-gray-50 dark:border-gray-700 pt-2"
-        >
-          {post.imageUrl && (
-            <img src={post.imageUrl} alt="" className="w-9 h-9 rounded-lg object-cover flex-shrink-0" />
-          )}
-          {post.body && (
-            <span className="text-xs text-gray-400 truncate max-w-[70%]">{post.body}</span>
-          )}
-        </button>
-      )}
-      {/* Collapsed divider when no preview content */}
-      {collapsed && !post.body && !post.imageUrl && (
-        <div className="border-t border-gray-50 dark:border-gray-700 rounded-b-2xl" />
-      )}
+      {/* Collapsed: no extra row needed — everything is in the author row */}
 
       {/* Expanded content */}
       {!collapsed && <>