Three related layout polish issues.
1. Avatar + name + time splitting to two lines
Fixed by collapsing the "·" separator + time into a single Text
component (was three sibling Texts). RN occasionally lays out
three-Text-sibling rows oddly when the name is long because each
Text measures independently. With the separator glued to the time,
there's one indivisible chip for "· 2h" that flexShrink:0 keeps on
the row; the name takes the rest and truncates with "…" if needed.
Also wrapped the name + time in a flex:1 Pressable (author tap
target) so the row width is authoritative.
2. Avatar flush against the left edge
The outer Pressable's style-function paddingLeft was being applied
but the visual offset felt wrong because avatar has no explicit
width. Added width:44 to the avatar's own Pressable wrapper so the
flex-row layout reserves exactly the expected space and the 16-px
paddingLeft on the outer Pressable is visible around the avatar's
left edge.
3. Like / view count text visually below icon's centre
RN Text includes extra top padding (Android) and baseline-anchors
(iOS) that push the number glyph a pixel or two below the icon
centre in a flex-row with alignItems:'center'. Added explicit
lineHeight:16 (matching icon size) + includeFontPadding:false +
textAlignVertical:'center' on both the heart button's Text and the
shared ActionButton Text → numbers now sit on the same optical
baseline as their icons on both platforms.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
50aacced0b