Reduce display name size (#5482)

* reduce displayname size

* only apply to small screens

src/screens/Profile/Header/DisplayName.tsx

@@ -5,7 +5,7 @@ import {AppBskyActorDefs, ModerationDecision} from '@atproto/api'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {Shadow} from '#/state/cache/types'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'
 
 export function ProfileHeaderDisplayName({
@@ -16,12 +16,19 @@ export function ProfileHeaderDisplayName({
   moderation: ModerationDecision
 }) {
   const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+
   return (
     <View pointerEvents="none">
       <Text
         emoji
         testID="profileHeaderDisplayName"
-        style={[t.atoms.text, a.text_4xl, a.self_start, {fontWeight: '600'}]}>
+        style={[
+          t.atoms.text,
+          gtMobile ? a.text_4xl : a.text_3xl,
+          a.self_start,
+          {fontWeight: '600'},
+        ]}>
         {sanitizeDisplayName(
           profile.displayName || sanitizeHandle(profile.handle),
           moderation.ui('displayName'),