move handle below display name

src/view/com/posts/FeedItem.tsx

@@ -603,6 +603,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     flexWrap: 'wrap',
+    paddingTop: 4,
     paddingBottom: 2,
     overflow: 'hidden',
   },

src/view/com/util/PostMeta.tsx

@@ -8,12 +8,12 @@ import {precacheProfile} from '#/state/queries/profile'
 import {usePalette} from 'lib/hooks/usePalette'
 import {makeProfileLink} from 'lib/routes/links'
 import {forceLTR} from 'lib/strings/bidi'
-import {NON_BREAKING_SPACE} from 'lib/strings/constants'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {niceDate} from 'lib/strings/time'
 import {TypographyVariant} from 'lib/ThemeContext'
 import {isAndroid} from 'platform/detection'
+import {atoms as a} from '#/alf'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {TextLinkOnWebOnly} from './Link'
 import {Text} from './text/Text'
@@ -39,8 +39,11 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
   const {i18n} = useLingui()
 
   const pal = usePalette('default')
-  const displayName = opts.author.displayName || opts.author.handle
+  const displayName = sanitizeDisplayName(
-  const handle = opts.author.handle
+    opts.author.displayName || opts.author.handle,
+    opts.moderation?.ui('displayName'),
+  )
+  const handle = sanitizeHandle(opts.author.handle, '@')
   const profileLink = makeProfileLink(opts.author)
   const queryClient = useQueryClient()
   const onOpenAuthor = opts.onOpenAuthor
@@ -53,65 +56,67 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
   }, [queryClient, opts.author])
 
   return (
-    <View style={[styles.container, opts.style]}>
+    <View style={[a.flex_1, a.flex_col, {gap: 1}]}>
-      {opts.showAvatar && (
+      <View style={[a.flex_row, a.align_end, a.gap_xs, opts.style]}>
-        <View style={styles.avatar}>
+        {opts.showAvatar && (
-          <PreviewableUserAvatar
+          <View style={styles.avatar}>
-            size={opts.avatarSize || 16}
+            <PreviewableUserAvatar
-            profile={opts.author}
+              size={opts.avatarSize || 16}
-            moderation={opts.avatarModeration}
+              profile={opts.author}
-            type={opts.author.associated?.labeler ? 'labeler' : 'user'}
+              moderation={opts.avatarModeration}
-          />
+              type={opts.author.associated?.labeler ? 'labeler' : 'user'}
-        </View>
+            />
-      )}
+          </View>
-      <ProfileHoverCard inline did={opts.author.did}>
-        <Text
-          numberOfLines={1}
-          style={[styles.maxWidth, pal.textLight, opts.displayNameStyle]}>
-          <TextLinkOnWebOnly
-            type={opts.displayNameType || 'lg-bold'}
-            style={[pal.text]}
-            lineHeight={1.2}
-            disableMismatchWarning
-            text={forceLTR(
-              sanitizeDisplayName(
-                displayName,
-                opts.moderation?.ui('displayName'),
-              ),
-            )}
-            href={profileLink}
-            onBeforePress={onBeforePressAuthor}
-          />
-          <TextLinkOnWebOnly
-            type="md"
-            disableMismatchWarning
-            style={[pal.textLight, {flexShrink: 4}]}
-            text={NON_BREAKING_SPACE + sanitizeHandle(handle, '@')}
-            href={profileLink}
-            onBeforePress={onBeforePressAuthor}
-            anchorNoUnderline
-          />
-        </Text>
-      </ProfileHoverCard>
-      {!isAndroid && (
-        <Text type="md" style={pal.textLight} accessible={false}>
-          &middot;
-        </Text>
-      )}
-      <TimeElapsed timestamp={opts.timestamp}>
-        {({timeElapsed}) => (
-          <TextLinkOnWebOnly
-            type="md"
-            style={pal.textLight}
-            text={timeElapsed}
-            accessibilityLabel={niceDate(i18n, opts.timestamp)}
-            title={niceDate(i18n, opts.timestamp)}
-            accessibilityHint=""
-            href={opts.postHref}
-            onBeforePress={onBeforePressPost}
-          />
         )}
-      </TimeElapsed>
+        <ProfileHoverCard inline did={opts.author.did}>
+          <Text
+            numberOfLines={1}
+            style={[styles.maxWidth, pal.textLight, opts.displayNameStyle]}>
+            <TextLinkOnWebOnly
+              type={opts.displayNameType || 'lg-bold'}
+              style={[pal.text]}
+              lineHeight={1.2}
+              disableMismatchWarning
+              text={forceLTR(
+                sanitizeDisplayName(
+                  displayName,
+                  opts.moderation?.ui('displayName'),
+                ),
+              )}
+              href={profileLink}
+              onBeforePress={onBeforePressAuthor}
+            />
+          </Text>
+        </ProfileHoverCard>
+        {!isAndroid && (
+          <Text type="md" style={pal.textLight} accessible={false}>
+            &middot;
+          </Text>
+        )}
+        <TimeElapsed timestamp={opts.timestamp}>
+          {({timeElapsed}) => (
+            <TextLinkOnWebOnly
+              type="md"
+              style={pal.textLight}
+              text={timeElapsed}
+              accessibilityLabel={niceDate(i18n, opts.timestamp)}
+              title={niceDate(i18n, opts.timestamp)}
+              accessibilityHint=""
+              href={opts.postHref}
+              onBeforePress={onBeforePressPost}
+            />
+          )}
+        </TimeElapsed>
+      </View>
+      <TextLinkOnWebOnly
+        type="md"
+        disableMismatchWarning
+        style={[pal.textLight]}
+        text={handle}
+        href={profileLink}
+        onBeforePress={onBeforePressAuthor}
+        anchorNoUnderline
+      />
     </View>
   )
 }
@@ -119,14 +124,6 @@ PostMeta = memo(PostMeta)
 export {PostMeta}
 
 const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'flex-end',
-    paddingBottom: 2,
-    gap: 4,
-    zIndex: 1,
-    flex: 1,
-  },
   avatar: {
     alignSelf: 'center',
   },