From 7bfd8c7dea415ef75942e962b6aa396133138f08 Mon Sep 17 00:00:00 2001
From: vsecoder <vsecoder@git.vsecoder.vodka>
Date: Sat, 18 Apr 2026 20:31:03 +0300
Subject: [PATCH] fix(feed): side padding on action row + stable FAB
 right-anchor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Post action row (chat / ❤ / eye / share) had only a small paddingRight
  and no left padding. First icon sat flush under the avatar and share
  iron against the card edge. Replaced with paddingHorizontal: 12 so
  both sides get equal breathing room; each of the four cells still
  flex:1 so the icons distribute evenly.
- FAB kept appearing at the LEFT edge instead of the right on user's
  device despite position:absolute + right:12. Pressable's dynamic-
  function style can drop absolute-positioning fields between renders
  on some RN versions. Wrapping the Pressable in a plain absolute-
  positioned View fixes this: positioning lives on the View (never
  re-evaluated mid-render), the Pressable inside only declares size
  and visuals. pointerEvents="box-none" on the wrapper keeps taps
  outside the button passing through to the feed list below.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 client-app/app/(app)/feed/index.tsx     | 50 +++++++++++++++----------
 client-app/components/feed/PostCard.tsx |  6 ++-
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/client-app/app/(app)/feed/index.tsx b/client-app/app/(app)/feed/index.tsx
index 5956cd2..f213e16 100644
--- a/client-app/app/(app)/feed/index.tsx
+++ b/client-app/app/(app)/feed/index.tsx
@@ -251,29 +251,41 @@ export default function FeedScreen() {
         contentContainerStyle={posts.length === 0 ? { flexGrow: 1 } : undefined}
       />
 
-      {/* Floating compose button — pinned 12px from the right edge of
-          the screen and 12px above the NavBar top. The Feed screen's
-          container ends at the NavBar top (see (app)/_layout.tsx), so
-          a plain bottom: 12 measures from exactly that edge. */}
-      <Pressable
-        onPress={() => router.push('/(app)/compose' as never)}
-        style={({ pressed }) => ({
+      {/* Floating compose button.
+       *
+       * Pressable's dynamic-function style sometimes drops absolute
+       * positioning on re-render on some RN versions — we've seen the
+       * button slide to the left edge after the first render. Wrap it
+       * in a plain absolute-positioned View so positioning lives on a
+       * stable element; the Pressable inside only declares its size
+       * and visuals. The parent Feed screen's container ends at the
+       * NavBar top (see (app)/_layout.tsx), so bottom: 12 means 12px
+       * above the NavBar on every device. */}
+      <View
+        pointerEvents="box-none"
+        style={{
           position: 'absolute',
           right: 12,
           bottom: 12,
-          width: 56, height: 56,
-          borderRadius: 28,
-          backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',
-          alignItems: 'center', justifyContent: 'center',
-          shadowColor: '#000',
-          shadowOffset: { width: 0, height: 4 },
-          shadowOpacity: 0.5,
-          shadowRadius: 6,
-          elevation: 8,
-        })}
+        }}
       >
-        <Ionicons name="create-outline" size={24} color="#ffffff" />
-      </Pressable>
+        <Pressable
+          onPress={() => router.push('/(app)/compose' as never)}
+          style={({ pressed }) => ({
+            width: 56, height: 56,
+            borderRadius: 28,
+            backgroundColor: pressed ? '#1a8cd8' : '#1d9bf0',
+            alignItems: 'center', justifyContent: 'center',
+            shadowColor: '#000',
+            shadowOffset: { width: 0, height: 4 },
+            shadowOpacity: 0.5,
+            shadowRadius: 6,
+            elevation: 8,
+          })}
+        >
+          <Ionicons name="create-outline" size={24} color="#ffffff" />
+        </Pressable>
+      </View>
     </View>
   );
 }
diff --git a/client-app/components/feed/PostCard.tsx b/client-app/components/feed/PostCard.tsx
index 87c44a5..35fc26c 100644
--- a/client-app/components/feed/PostCard.tsx
+++ b/client-app/components/feed/PostCard.tsx
@@ -247,14 +247,16 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }:
         {/* Action row — 4 evenly-spaced buttons (Twitter-style). Each is
             wrapped in a flex: 1 container so even if one label is
             wider than another, visual spacing between centres stays
-            balanced. */}
+            balanced. paddingHorizontal gives extra breathing room on
+            both sides so the first icon isn't flush under the avatar
+            and the share icon isn't flush with the card edge. */}
         <View
           style={{
             flexDirection: 'row',
             alignItems: 'center',
             justifyContent: 'space-between',
             marginTop: 12,
-            paddingRight: 4,
+            paddingHorizontal: 12,
           }}
         >
           <View style={{ flex: 1, alignItems: 'flex-start' }}>