From ab25b7531d789057d1f8473f4dc59435c7df8a9f Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sun, 24 May 2026 08:13:54 +0530
Subject: [PATCH] fix: collapsed post preview centered + auto-expand on
 edit/delete
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Collapsed preview (thumbnail + text) moved to its own row centered
  below the author line instead of being pushed to the right
- Chevron ▼/▲ stays on the author row right side as the only element
- Edit post and Delete post now call setCollapsed(false) first so the
  edit textarea / delete confirmation is always visible when triggered
  from a collapsed card

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

diff --git a/src/app/circle/[id]/page.tsx b/src/app/circle/[id]/page.tsx
index bd99201..4a97bad 100644
--- a/src/app/circle/[id]/page.tsx
+++ b/src/app/circle/[id]/page.tsx
@@ -124,19 +124,7 @@ function PostCard({
             <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>
-          {/* Collapsed preview */}
-          {collapsed && (
-            <div className="flex items-center gap-2 flex-shrink-0 max-w-[45%]">
-              {post.imageUrl && (
-                <img src={post.imageUrl} alt="" className="w-10 h-10 rounded-lg object-cover flex-shrink-0" />
-              )}
-              {post.body && (
-                <span className="text-xs text-gray-400 truncate">{post.body}</span>
-              )}
-              <span className="text-gray-300 text-xs flex-shrink-0">▼</span>
-            </div>
-          )}
-          {!collapsed && <span className="text-gray-300 text-xs flex-shrink-0 ml-2">▲</span>}
+          <span className="text-gray-300 text-xs flex-shrink-0 ml-2">{collapsed ? "▼" : "▲"}</span>
         </button>
         {/* ⋯ menu — rendered outside overflow:hidden so it doesn't get clipped */}
         <div className="relative">
@@ -147,13 +135,13 @@ function PostCard({
               <div className="absolute right-0 top-9 z-50 bg-white dark:bg-gray-900 rounded-xl shadow-xl border border-gray-100 dark:border-gray-700 min-w-[170px] py-1">
                 {isOwn && (
                   <button
-                    onClick={() => { setShowMenu(false); setEditMode(true); setEditBody(post.body ?? ""); }}
+                    onClick={() => { setShowMenu(false); setCollapsed(false); setEditMode(true); setEditBody(post.body ?? ""); }}
                     className="w-full text-left px-4 py-2.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-700"
                   >✏️ Edit post</button>
                 )}
                 {(isOwn || isAdmin) && (
                   <button
-                    onClick={() => { setShowMenu(false); setDeleteConfirm(true); }}
+                    onClick={() => { setShowMenu(false); setCollapsed(false); setDeleteConfirm(true); }}
                     className="w-full text-left px-4 py-2.5 text-sm text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20"
                   >🗑️ Delete post</button>
                 )}
@@ -170,8 +158,24 @@ function PostCard({
         </div>
       </div>
 
-      {/* Collapsed divider */}
-      {collapsed && <div className="border-t border-gray-50 dark:border-gray-700 rounded-b-2xl" />}
+      {/* 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" />
+      )}
 
       {/* Expanded content */}
       {!collapsed && <>