fix(feed): move card layout off Pressable style-fn so paddings stick
Same Pressable-dynamic-style-function bug that bit the FAB: on some RN versions the style function is re-evaluated mid-render in a way that drops properties — here we lost paddingLeft:16 and sometimes flexDirection:'row' on the outer PostCard Pressable, which is why the avatar ended up flush against the left edge and the header/body sometimes stacked into a column instead of row. Fix: move layout to a plain <View> wrapper (static styles, can never be dropped). Tap handling stays on two Pressables: - the avatar wrapper (opens author profile), - the content column (opens post detail + long-press for menu). The card area visually covered by these two Pressables is ~100% — tap anywhere on a post still navigates to detail, tap on the avatar still goes to the author. No interaction regression. Also paired opacity press-state on the content-column Pressable so the feedback visual matches what the old bg-colour press gave. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -183,16 +183,20 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }:
|
||||
|
||||
return (
|
||||
<>
|
||||
<Pressable
|
||||
onPress={onOpenDetail}
|
||||
onLongPress={onLongPress}
|
||||
style={({ pressed }) => ({
|
||||
{/* Outer container is a plain View so layout styles (padding, row
|
||||
direction) are static and always applied. Pressable's dynamic
|
||||
style-function has been observed to drop properties between
|
||||
renders on some RN versions — we hit that with the FAB, so
|
||||
we're not relying on it here either. Tap handling lives on the
|
||||
content-column Pressable (covers ~90% of the card area) plus a
|
||||
separate Pressable around the avatar. */}
|
||||
<View
|
||||
style={{
|
||||
flexDirection: 'row',
|
||||
paddingLeft: 16,
|
||||
paddingRight: 16,
|
||||
paddingVertical: compact ? 10 : 12,
|
||||
backgroundColor: pressed ? '#080808' : 'transparent',
|
||||
})}
|
||||
}}
|
||||
>
|
||||
{/* Avatar — own tap target (opens author profile). Explicit width
|
||||
on the wrapper (width:44) so the flex-row sibling below computes
|
||||
@@ -201,9 +205,21 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }:
|
||||
<Avatar name={displayName} address={post.author} size={44} />
|
||||
</Pressable>
|
||||
|
||||
{/* Content column. overflow:'hidden' prevents unbreakable tokens
|
||||
from drawing past the right edge of the card. */}
|
||||
<View style={{ flex: 1, marginLeft: 10, minWidth: 0, overflow: 'hidden' }}>
|
||||
{/* Content column. Pressable so the card body is tappable →
|
||||
detail; onLongPress routes to the context menu. overflow:
|
||||
'hidden' prevents unbreakable tokens from drawing past the
|
||||
right edge. */}
|
||||
<Pressable
|
||||
onPress={onOpenDetail}
|
||||
onLongPress={onLongPress}
|
||||
style={({ pressed }) => ({
|
||||
flex: 1,
|
||||
marginLeft: 10,
|
||||
minWidth: 0,
|
||||
overflow: 'hidden',
|
||||
opacity: pressed ? 0.85 : 1,
|
||||
})}
|
||||
>
|
||||
{/* Header row — name + time on ONE line.
|
||||
Two siblings: the author-link Pressable (flex:1, row, so it
|
||||
expands; name inside gets numberOfLines:1 + flexShrink:1 so
|
||||
@@ -361,8 +377,8 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }:
|
||||
/>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</Pressable>
|
||||
</Pressable>
|
||||
</View>
|
||||
<ShareSheet
|
||||
visible={shareOpen}
|
||||
post={post}
|
||||
|
||||
Reference in New Issue
Block a user