manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: collapsed post card single-row layout

Browse source 
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>
This commit is contained in:
Manohar Gupta 2026-05-24 08:18:02 +05:30
parent ab25b7531d
commit bcc167d7c2
1 changed files with 18 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/app/circle/[id]/page.tsx
View file

@ -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 && <>