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,95 +160,100 @@ function PostInner({
   const [hover, setHover] = useState(false)
 
   return (
-    <Link
+    <GalleryBleed>
-      href={itemHref}
+      <Link
-      style={[
+        href={itemHref}
-        styles.outer,
+        style={[
-        pal.border,
+          styles.outer,
-        !hideTopBorder && {borderTopWidth: StyleSheet.hairlineWidth},
+          pal.border,
-        style,
+          !hideTopBorder && {borderTopWidth: StyleSheet.hairlineWidth},
-      ]}
+          style,
-      onBeforePress={onBeforePress}
+        ]}
-      onPointerEnter={() => {
+        onBeforePress={onBeforePress}
-        setHover(true)
+        onPointerEnter={() => {
-      }}
+          setHover(true)
-      onPointerLeave={() => {
+        }}
-        setHover(false)
+        onPointerLeave={() => {
-      }}>
+          setHover(false)
-      <SubtleHover hover={hover} />
+        }}>
-      {showReplyLine && <View style={styles.replyLine} />}
+        <SubtleHover hover={hover} />
-      <View style={styles.layout}>
+        {showReplyLine && <View style={styles.replyLine} />}
-        <View style={styles.layoutAvi}>
+        <View style={styles.layout}>
-          <PreviewableUserAvatar
+          <View style={styles.layoutAvi}>
-            size={42}
+            <PreviewableUserAvatar
-            profile={post.author}
+              size={42}
-            moderation={moderation.ui('avatar')}
+              profile={post.author}
-            type={post.author.associated?.labeler ? 'labeler' : 'user'}
+              moderation={moderation.ui('avatar')}
-          />
+              type={post.author.associated?.labeler ? 'labeler' : 'user'}
-        </View>
-        <View
-          style={[
-            styles.layoutContent,
-            !richText.text && styles.layoutContentNoText,
-          ]}>
-          <PostMeta
-            author={post.author}
-            moderation={moderation}
-            timestamp={post.indexedAt}
-            postHref={itemHref}
-          />
-          {replyAuthorDid !== '' && (
-            <PostRepliedTo parentAuthor={replyAuthorDid} />
-          )}
-          <LabelsOnMyPost post={post} />
-          <ContentHider
-            modui={moderation.ui('contentView')}
-            style={styles.contentHider}
-            childContainerStyle={styles.contentHiderChild}>
-            <PostAlerts
-              modui={moderation.ui('contentView')}
-              style={[a.pb_xs]}
             />
-            {richText.text ? (
+          </View>
-              <View style={[a.mb_2xs]}>
+          <View
-                <RichText
+            style={[
-                  enableTags
+              styles.layoutContent,
-                  testID="postText"
+              !richText.text && POST_META_NO_CONTENT_OFFSET,
-                  value={richText}
+            ]}>
-                  numberOfLines={limitLines ? MAX_POST_LINES : undefined}
+            <PostMeta
-                  style={[a.flex_1, a.text_md]}
+              author={post.author}
-                  authorHandle={post.author.handle}
+              moderation={moderation}
-                  shouldProxyLinks={true}
+              timestamp={post.indexedAt}
-                />
+              postHref={itemHref}
-                {limitLines && (
+            />
-                  <ShowMoreTextButton
+            {replyAuthorDid !== '' && (
-                    style={[a.text_md]}
+              <PostRepliedTo parentAuthor={replyAuthorDid} />
-                    onPress={onPressShowMore}
+            )}
+            <LabelsOnMyPost post={post} />
+            <ContentHider
+              modui={moderation.ui('contentView')}
+              style={styles.contentHider}
+              childContainerStyle={styles.contentHiderChild}>
+              <PostAlerts
+                modui={moderation.ui('contentView')}
+                style={[a.pb_xs]}
+              />
+              {richText.text ? (
+                <View style={[a.mb_2xs]}>
+                  <RichText
+                    enableTags
+                    testID="postText"
+                    value={richText}
+                    numberOfLines={limitLines ? MAX_POST_LINES : undefined}
+                    style={[a.flex_1, a.text_md]}
+                    authorHandle={post.author.handle}
+                    shouldProxyLinks={true}
                   />
-                )}
+                  {limitLines && (
-              </View>
+                    <ShowMoreTextButton
-            ) : undefined}
+                      style={[a.text_md]}
-            <TranslatedPost hideTranslateLink post={post} />
+                      onPress={onPressShowMore}
-            {post.embed ? (
+                    />
-              <View style={!richText.text ? {marginTop: 6} : undefined}>
+                  )}
-                <Embed
+                </View>
-                  embed={post.embed}
+              ) : undefined}
-                  moderation={moderation}
+              <TranslatedPost hideTranslateLink post={post} />
-                  viewContext={PostEmbedViewContext.Feed}
+              {post.embed ? (
-                />
+                <View
-              </View>
+                  style={
-            ) : null}
+                    !richText.text ? POST_EMBED_NO_CONTENT_OFFSET : undefined
-          </ContentHider>
+                  }>
-          <PostControls
+                  <Embed
-            post={post}
+                    embed={post.embed}
-            record={record}
+                    moderation={moderation}
-            richText={richText}
+                    viewContext={PostEmbedViewContext.Feed}
-            onPressReply={onPressReply}
+                  />
-            logContext="Post"
+                </View>
-          />
+              ) : null}
+            </ContentHider>
+            <PostControls
+              post={post}
+              record={record}
+              richText={richText}
+              onPressReply={onPressReply}
+              logContext="Post"
+            />
+          </View>
         </View>
-      </View>
+      </Link>
-    </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,