Improve display name in Settings (#8256)

src/screens/Settings/Settings.tsx

@@ -290,6 +290,10 @@ function ProfilePreview({
   if (!moderationOpts) return null
 
   const moderation = moderateProfile(profile, moderationOpts)
+  const displayName = sanitizeDisplayName(
+    profile.displayName || sanitizeHandle(profile.handle),
+    moderation.ui('displayName'),
+  )
 
   return (
     <>
@@ -300,7 +304,14 @@ function ProfilePreview({
         type={shadow.associated?.labeler ? 'labeler' : 'user'}
       />
 
-      <View style={[a.flex_row, a.gap_xs, a.align_center]}>
+      <View
+        style={[
+          a.flex_row,
+          a.gap_xs,
+          a.align_center,
+          a.justify_center,
+          a.w_full,
+        ]}>
         <Text
           emoji
           testID="profileHeaderDisplayName"
@@ -311,10 +322,7 @@ function ProfilePreview({
             gtMobile ? a.text_4xl : a.text_3xl,
             a.font_heavy,
           ]}>
-          {sanitizeDisplayName(
+          {displayName}
-            profile.displayName || sanitizeHandle(profile.handle),
-            moderation.ui('displayName'),
-          )}
         </Text>
         {shouldShowVerificationCheckButton(verificationState) && (
           <View