fix(feed): long post body no longer overflows the card

The body Text inherited the content column's width only implicitly
via flex:1 on the parent, which on some Android RN builds was
computed one or two pixels wider than the true column width — enough
to make a long line visually escape the right side of the card.

Belt-and-braces fix:
  - content column gets overflow:'hidden' so anything that escapes
    the computed width gets clipped instead of drawn outside.
  - body Text explicitly sets width:'100%' + flexShrink:1 +
    paddingRight:4 so the wrapping algorithm always knows the
    authoritative maximum and leaves a 4-px visual buffer from the
    column edge.

Together these guarantee long single-line posts wrap correctly on
both iOS and Android, and short-but-wide tokens (URLs, long
hashtags) ellipsize instead of poking out.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
vsecoder
2026-04-18 21:14:22 +03:00
parent c5ca7a0612
commit 38ae80f57a

View File

@@ -195,8 +195,10 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }:
<Avatar name={displayName} address={post.author} size={44} />
</Pressable>
{/* Content column */}
<View style={{ flex: 1, marginLeft: 10, minWidth: 0 }}>
{/* Content column. overflow:'hidden' stops a long unbreakable
token (URL, hashtag) from visually escaping the card — it'll
be ellipsized or clipped instead. */}
<View style={{ flex: 1, marginLeft: 10, minWidth: 0, overflow: 'hidden' }}>
{/* 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
@@ -243,7 +245,12 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }:
)}
</Pressable>
{/* Body text with hashtag highlighting */}
{/* Body text with hashtag highlighting.
flexShrink:1 + explicit width:'100%' + paddingRight:4 keep
long lines inside the content column on every platform. On
Android a few RN versions have been known to let the inner
Text spans overflow the parent by 1-2 px without an explicit
width declaration — hence the belt-and-braces here. */}
{post.content.length > 0 && (
<Text
numberOfLines={bodyLines}
@@ -253,6 +260,9 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }:
fontSize: 15,
lineHeight: 20,
marginTop: 2,
width: '100%',
flexShrink: 1,
paddingRight: 4,
}}
>
{renderInline(post.content)}