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:
@@ -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)}
|
||||
|
||||
Reference in New Issue
Block a user