fix(feed): visible post divider + reliable FAB positioning
- Post divider was on each PostCard's outer Pressable as borderBottom (#222), which was barely visible on OLED black and disappeared entirely in pressed state (the pressed bg ate the line). Moved the seam to a dedicated PostSeparator component (1px, #2a2a2a) wired as FlatList's ItemSeparatorComponent on both /feed (timeline / for-you / trending) and /feed/tag/[tag]. Also bumped inter-card vertical padding (14-16 top / 16-20 bottom) so cards have real breathing room even before the divider. - FAB position was flaky: with <Stack> at the (app) level the overlay could end up positioned against the Stack's card view instead of the tab container, which made the button drift around and stick against unexpected edges. Wrapped it in an absoluteFill container with pointerEvents="box-none" — the wrapper owns positioning against the tab screen, the button inside just declares right: 14 / bottom: N. Bumped bottom offset to `max(insets.bottom, 8) + 70` so the FAB always clears the 5-icon NavBar with ~14px visual gap on every device. Shadow switched from blue-cast to standard dark for better depth perception on dark backgrounds. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -174,11 +174,9 @@ function PostCardInner({ post, likedByMe, onStatsChanged, onDeleted, compact }:
|
||||
style={({ pressed }) => ({
|
||||
flexDirection: 'row',
|
||||
paddingHorizontal: 16,
|
||||
paddingTop: compact ? 12 : 16,
|
||||
paddingBottom: compact ? 14 : 18,
|
||||
paddingTop: compact ? 14 : 18,
|
||||
paddingBottom: compact ? 16 : 20,
|
||||
backgroundColor: pressed ? '#080808' : 'transparent',
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: '#222222',
|
||||
})}
|
||||
>
|
||||
{/* Avatar column */}
|
||||
@@ -321,6 +319,20 @@ const _imgKeep = Image;
|
||||
|
||||
export const PostCard = React.memo(PostCardInner);
|
||||
|
||||
/**
|
||||
* PostSeparator — visible divider line between post cards. Exported so
|
||||
* every feed surface (timeline, author, hashtag, post detail) can pass
|
||||
* it as ItemSeparatorComponent and get identical spacing / colour.
|
||||
*
|
||||
* The line colour (#2a2a2a) is the minimum grey that reads on OLED
|
||||
* black under mobile-bright-mode gamma — go darker and the seam vanishes.
|
||||
* Height 1 is one logical px (hairline on retina). No horizontal inset:
|
||||
* Twitter runs the seam edge-to-edge and it looks cleaner than a gap.
|
||||
*/
|
||||
export function PostSeparator() {
|
||||
return <View style={{ height: 1, backgroundColor: '#2a2a2a' }} />;
|
||||
}
|
||||
|
||||
// ── Inline helpers ──────────────────────────────────────────────────────
|
||||
|
||||
/** ActionButton — small icon + optional label. */
|
||||
|
||||
Reference in New Issue
Block a user