Align on the offset hack we need for posts with no content

src/components/images/Gallery/const.ts

@@ -1,3 +1,6 @@
 export const ITEM_GAP = 8 // tokens.space.sm
 export const MIN_ASPECT_RATIO = 2 / 3 // portrait limit
 export const MAX_ASPECT_RATIO = 3 / 2 // landscape limit
+
+export const POST_META_NO_CONTENT_OFFSET = {paddingTop: 10}
+export const POST_EMBED_NO_CONTENT_OFFSET = {paddingTop: 6}

src/components/images/Gallery/index.tsx

@@ -41,6 +41,8 @@ import {Text} from '#/components/Typography'
 import {useAnalytics} from '#/analytics'
 import {IS_WEB} from '#/env'
 
+export * from './const'
+
 interface GalleryProps {
   images: AppBskyEmbedImages.ViewImage[]
   onPress?: (

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -408,7 +408,7 @@ const ThreadItemAnchorInner = memo(function ThreadItemAnchorInner({
               ) : undefined}
               <TranslatedPost post={post} postTextStyle={[a.text_lg]} />
               {post.embed && (
-                <View style={[a.py_xs]}>
+                <View style={[richText?.text ? a.py_xs : []]}>
                   <Embed
                     embed={post.embed}
                     moderation={moderation}

src/screens/PostThread/components/ThreadItemPost.tsx

@@ -32,7 +32,11 @@ import {atoms as a, useTheme} from '#/alf'
 import {DebugFieldDisplay} from '#/components/DebugFieldDisplay'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
-import {GalleryBleed} from '#/components/images/Gallery'
+import {
+  GalleryBleed,
+  POST_EMBED_NO_CONTENT_OFFSET,
+  POST_META_NO_CONTENT_OFFSET,
+} from '#/components/images/Gallery'
 import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
 import {PostHider} from '#/components/moderation/PostHider'
@@ -298,7 +302,10 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
                 moderation={moderation}
                 timestamp={post.indexedAt}
                 postHref={postHref}
-                style={[a.pb_xs]}
+                style={[
+                  a.pb_xs,
+                  !richText?.text && POST_META_NO_CONTENT_OFFSET,
+                ]}
               />
               <LabelsOnMyPost post={post} style={[a.pb_xs]} />
               <PostAlerts
@@ -326,7 +333,11 @@ const ThreadItemPostInner = memo(function ThreadItemPostInner({
               ) : undefined}
               <TranslatedPost hideTranslateLink post={post} />
               {post.embed && (
-                <View style={[a.pb_xs]}>
+                <View
+                  style={[
+                    !richText?.text ? POST_EMBED_NO_CONTENT_OFFSET : [],
+                    a.pb_xs,
+                  ]}>
                   <Embed
                     embed={post.embed}
                     moderation={moderation}

src/view/com/post/Post.tsx

@@ -27,6 +27,11 @@ import {Link} from '#/view/com/util/Link'
 import {PostMeta} from '#/view/com/util/PostMeta'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a} from '#/alf'
+import {
+  GalleryBleed,
+  POST_EMBED_NO_CONTENT_OFFSET,
+  POST_META_NO_CONTENT_OFFSET,
+} from '#/components/images/Gallery'
 import {ContentHider} from '#/components/moderation/ContentHider'
 import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
@@ -155,6 +160,7 @@ function PostInner({
   const [hover, setHover] = useState(false)
 
   return (
+    <GalleryBleed>
       <Link
         href={itemHref}
         style={[
@@ -184,7 +190,7 @@ function PostInner({
           <View
             style={[
               styles.layoutContent,
-            !richText.text && styles.layoutContentNoText,
+              !richText.text && POST_META_NO_CONTENT_OFFSET,
             ]}>
             <PostMeta
               author={post.author}
@@ -225,7 +231,10 @@ function PostInner({
               ) : undefined}
               <TranslatedPost hideTranslateLink post={post} />
               {post.embed ? (
-              <View style={!richText.text ? {marginTop: 6} : undefined}>
+                <View
+                  style={
+                    !richText.text ? POST_EMBED_NO_CONTENT_OFFSET : undefined
+                  }>
                   <Embed
                     embed={post.embed}
                     moderation={moderation}
@@ -244,6 +253,7 @@ function PostInner({
           </View>
         </View>
       </Link>
+    </GalleryBleed>
   )
 }
 
@@ -266,9 +276,6 @@ const styles = StyleSheet.create({
   layoutContent: {
     flex: 1,
   },
-  layoutContentNoText: {
-    paddingTop: 10,
-  },
   alert: {
     marginBottom: 6,
   },

src/view/com/posts/PostFeedItem.tsx

@@ -34,7 +34,11 @@ import {Link} from '#/view/com/util/Link'
 import {PostMeta} from '#/view/com/util/PostMeta'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a} from '#/alf'
-import {GalleryBleed} from '#/components/images/Gallery'
+import {
+  GalleryBleed,
+  POST_EMBED_NO_CONTENT_OFFSET,
+  POST_META_NO_CONTENT_OFFSET,
+} from '#/components/images/Gallery'
 import {ContentHider} from '#/components/moderation/ContentHider'
 import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
@@ -364,7 +368,7 @@ let FeedItemInner = ({
           <View
             style={[
               styles.layoutContent,
-              !richText.text && styles.layoutContentNoText,
+              !richText.text && POST_META_NO_CONTENT_OFFSET,
             ]}>
             <PostMeta
               author={post.author}
@@ -499,7 +503,7 @@ let PostContent = ({
       ) : undefined}
       {record && <TranslatedPost hideTranslateLink post={post} />}
       {postEmbed ? (
-        <View style={[a.pb_xs, !richText.text && {marginTop: 6}]}>
+        <View style={[a.pb_xs, !richText.text && POST_EMBED_NO_CONTENT_OFFSET]}>
           <Embed
             embed={postEmbed}
             moderation={moderation}
@@ -535,9 +539,6 @@ const styles = StyleSheet.create({
   layoutContent: {
     flex: 1,
   },
-  layoutContentNoText: {
-    paddingTop: 10,
-  },
   alert: {
     marginTop: 6,
     marginBottom: 6,