diff --git a/client-app/components/feed/PostCard.tsx b/client-app/components/feed/PostCard.tsx index 1778c21..6ffd902 100644 --- a/client-app/components/feed/PostCard.tsx +++ b/client-app/components/feed/PostCard.tsx @@ -190,86 +190,80 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }: we're not relying on it here either. Tap handling lives on the content-column Pressable (covers ~90% of the card area) plus a separate Pressable around the avatar. */} + {/* Card = vertical stack: [HEADER row with avatar+name+time] / + [FULL-WIDTH content column with body/image/actions]. Putting + content under the header (rather than in a column next to the + avatar) means body text and attachments occupy the full card + width — no risk of the text running next to the avatar and + clipping off the right edge. */} - {/* Avatar — own tap target (opens author profile). Explicit width - on the wrapper (width:44) so the flex-row sibling below computes - its remaining space correctly. */} - - - + {/* ── HEADER ROW: [avatar] [name · time] [menu] ──────────────── */} + + + + - {/* Content column. Pressable so the card body is tappable → - detail; onLongPress routes to the context menu. overflow: - 'hidden' prevents unbreakable tokens from drawing past the - right edge. */} + {/* Name + time take all remaining horizontal space in the + header, with the name truncating (numberOfLines:1 + + flexShrink:1) and the "· + + {/* ── CONTENT (body, attachment, actions) — full card width ──── */} ({ - flex: 1, - marginLeft: 10, - minWidth: 0, + marginTop: 8, overflow: 'hidden', opacity: pressed ? 0.85 : 1, })} > - {/* Header row — name + time on ONE line. - Two siblings: the author-link Pressable (flex:1, row, so it - expands; name inside gets numberOfLines:1 + flexShrink:1 so - it truncates instead of wrapping) and the "·