fix(feed): breathing room around divider + FAB back to right/bottom corner
- PostSeparator was a bare 1px line flush against both neighbouring cards, so the seam looked like card contact instead of a real break. Wrapped it in a 12px vertical padding — now there's 12px blank above the line, 1px line, 12px blank below. Trimmed the card's own paddingVertical back down since the separator now owns the inter-post breathing room. - FAB was lifted to bottom: max(insets.bottom, 8) + 70 in the previous commit which put it far too high (a leftover from the original experiment with the absoluteFill wrapper). User wants 12px above the NavBar and 12px from the right edge. The Feed screen's container ends at the NavBar top (enforced by (app)/_layout.tsx's outer <View flex:1> + NavBar sibling), so a simple `right: 12, bottom: 12` on position:absolute lands the button exactly there on every device. Removed the now-unnecessary absoluteFill wrapper too. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -251,43 +251,29 @@ export default function FeedScreen() {
|
||||
contentContainerStyle={posts.length === 0 ? { flexGrow: 1 } : undefined}
|
||||
/>
|
||||
|
||||
{/* Floating compose button.
|
||||
*
|
||||
* Wrapped in a StyleSheet.absoluteFill container with pointerEvents
|
||||
* "box-none" so only the FAB captures touches — taps anywhere else
|
||||
* pass through to the FlatList below.
|
||||
*
|
||||
* Inside the wrapper, alignSelf: 'flex-end' pins to the right;
|
||||
* bottom inset leaves ~14px clearance above the NavBar (≈56px tall
|
||||
* + safe-area-bottom). Explicit `right: 14` is belt-and-braces
|
||||
* for RTL / platform quirks where alignSelf alone might not pin. */}
|
||||
<View
|
||||
pointerEvents="box-none"
|
||||
style={{
|
||||
{/* 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 }) => ({
|
||||
position: 'absolute',
|
||||
left: 0, right: 0, top: 0, bottom: 0,
|
||||
}}
|
||||
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,
|
||||
})}
|
||||
>
|
||||
<Pressable
|
||||
onPress={() => router.push('/(app)/compose' as never)}
|
||||
style={({ pressed }) => ({
|
||||
position: 'absolute',
|
||||
right: 14,
|
||||
bottom: Math.max(insets.bottom, 8) + 70,
|
||||
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>
|
||||
<Ionicons name="create-outline" size={24} color="#ffffff" />
|
||||
</Pressable>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user