diff --git a/client-app/components/feed/PostCard.tsx b/client-app/components/feed/PostCard.tsx index 9c654c6..0b6d41d 100644 --- a/client-app/components/feed/PostCard.tsx +++ b/client-app/components/feed/PostCard.tsx @@ -185,65 +185,65 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }: onLongPress={onLongPress} style={({ pressed }) => ({ flexDirection: 'row', - paddingHorizontal: 16, + paddingLeft: 16, + paddingRight: 16, paddingVertical: compact ? 10 : 12, backgroundColor: pressed ? '#080808' : 'transparent', })} > - {/* Avatar column */} - + {/* 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. */} + - {/* Content column. overflow:'hidden' stops a long unbreakable - token (URL, hashtag) from visually escaping the card — it'll - be ellipsized or clipped instead. */} + {/* Content column. overflow:'hidden' prevents unbreakable tokens + from drawing past the right edge of the card. */} - {/* Header: [name] · [time] … [menu] - All three on a single row with no wrap. The name shrinks if - too long (flexShrink:1 + numberOfLines:1), time never shrinks - — so long handles get truncated with ellipsis while "2h" - stays readable. - - Whole header is inside a single Pressable so a tap anywhere - on the header opens the author's profile — matches Twitter's - behaviour where the name-row is a big hit target. */} - - " tail + (flexShrink:0 — never truncates). Keeping the "·" inside the + time Text means they stay glued even if the inline layout + decides to break weirdly. */} + + - {displayName} - - - · - - - {formatRelativeTime(post.created_at)} - - + + {displayName} + + + · {formatRelativeTime(post.created_at)} + + {mine && ( - + )} - + {/* Body text with hashtag highlighting. flexShrink:1 + explicit width:'100%' + paddingRight:4 keep @@ -336,6 +336,9 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }: color: localLiked ? '#e0245e' : '#6a6a6a', fontSize: 12, fontWeight: localLiked ? '600' : '400', + lineHeight: 16, + includeFontPadding: false, + textAlignVertical: 'center', }} > {formatCount(localLikeCount)} @@ -406,7 +409,22 @@ function ActionButton({ icon, label, onPress }: { > {label && ( - {label} + + {label} + )} );