Fix post numbers being clipped in some cases (#11413)

src/components/RichText.tsx

@@ -3,7 +3,7 @@ import {type StyleProp, type TextStyle} from 'react-native'
 import {AppBskyRichtextFacet, RichText as RichTextAPI} from '@atproto/api'
 
 import {toShortUrl} from '#/lib/strings/url-helpers'
-import {atoms as a, flatten, type TextStyleProp} from '#/alf'
+import {atoms as a, flatten, ios, type TextStyleProp} from '#/alf'
 import {isOnlyEmoji} from '#/alf/typography'
 import {InlineLinkText, type LinkProps} from '#/components/Link'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
@@ -28,6 +28,18 @@ export type RichTextProps = TextStyleProp &
     emojiMultiplier?: number
     shouldProxyLinks?: boolean
     suffix?: React.ReactNode
+    /**
+     * How far below the text baseline `suffix` extends, in px.
+     *
+     * Inline views inside `Text` sit with their bottom edge on the baseline, so
+     * a suffix nudged below it overflows the `Text`'s measured bounds and iOS
+     * clips it. We reserve this much room as bottom padding and cancel it with
+     * an equal negative margin, so the suffix can paint without moving anything
+     * after it. Pass the same offset the suffix nudges itself by.
+     *
+     * Overrides any `paddingBottom`/`marginBottom` set via `style`.
+     */
+    suffixOffset?: number
     /**
      * DANGEROUS: Disable facet lexicon validation
      *
@@ -56,6 +68,7 @@ export function RichText({
   onTextLayout,
   shouldProxyLinks,
   suffix,
+  suffixOffset = 0,
   disableMentionFacetValidation,
 }: RichTextProps) {
   const richText = useMemo(() => {
@@ -69,6 +82,10 @@ export function RichText({
   }, [value])
 
   const plainStyles = style
+  const suffixStyles =
+    suffix && suffixOffset
+      ? ios({paddingBottom: suffixOffset, marginBottom: -suffixOffset})
+      : null
   const interactiveStyles = [plainStyles, interactiveStyle]
 
   const {text, facets} = richText
@@ -83,7 +100,7 @@ export function RichText({
           emoji
           selectable={selectable}
           testID={testID}
-          style={[plainStyles, {fontSize}]}
+          style={[plainStyles, {fontSize}, suffixStyles]}
           onLayout={onLayout}
           onTextLayout={onTextLayout}
           // @ts-ignore web only -prf
@@ -99,7 +116,7 @@ export function RichText({
         emoji
         selectable={selectable}
         testID={testID}
-        style={plainStyles}
+        style={[plainStyles, suffixStyles]}
         numberOfLines={numberOfLines}
         onLayout={onLayout}
         onTextLayout={onTextLayout}
@@ -187,7 +204,7 @@ export function RichText({
       emoji
       selectable={selectable}
       testID={testID}
-      style={plainStyles}
+      style={[plainStyles, suffixStyles]}
       numberOfLines={numberOfLines}
       onLayout={onLayout}
       onTextLayout={onTextLayout}