From 38ae80f57af5b3800f35d2848e8275b50e6b32f4 Mon Sep 17 00:00:00 2001
From: vsecoder <vsecoder@git.vsecoder.vodka>
Date: Sat, 18 Apr 2026 21:14:22 +0300
Subject: [PATCH] fix(feed): long post body no longer overflows the card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 client-app/components/feed/PostCard.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/client-app/components/feed/PostCard.tsx b/client-app/components/feed/PostCard.tsx
index b823833..9c654c6 100644
--- a/client-app/components/feed/PostCard.tsx
+++ b/client-app/components/feed/PostCard.tsx
@@ -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)}