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 handle = opts.author.handle
+  const displayName = sanitizeDisplayName(
+    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,7 +56,8 @@ 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}]}>
+      <View style={[a.flex_row, a.align_end, a.gap_xs, opts.style]}>
         {opts.showAvatar && (
           <View style={styles.avatar}>
             <PreviewableUserAvatar
@@ -82,15 +86,6 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
               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 && (
@@ -113,20 +108,22 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
           )}
         </TimeElapsed>
       </View>
+      <TextLinkOnWebOnly
+        type="md"
+        disableMismatchWarning
+        style={[pal.textLight]}
+        text={handle}
+        href={profileLink}
+        onBeforePress={onBeforePressAuthor}
+        anchorNoUnderline
+      />
+    </View>
   )
 }
 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',
   },