Add text wrapping to profile header (#603)

1 files changed, 11 insertions, 2 deletions

diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index d69cf4a12..dee788aff 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -30,7 +30,7 @@ import {ProfileHeaderWarnings} from '../util/moderation/ProfileHeaderWarnings'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useAnalytics} from 'lib/analytics'
 import {NavigationProp} from 'lib/routes/types'
-import {isDesktopWeb} from 'platform/detection'
+import {isDesktopWeb, isNative} from 'platform/detection'
 import {FollowState} from 'state/models/cache/my-follows'
 import {shareUrl} from 'lib/sharing'
 import {formatCount} from '../util/numeric/format'
@@ -367,7 +367,7 @@ const ProfileHeaderLoaded = observer(
                 </Text>
               </View>
             ) : undefined}
-            <Text style={pal.textLight}>@{view.handle}</Text>
+            <Text style={[pal.textLight, styles.handle]}>@{view.handle}</Text>
           </View>
           {!blockHide && (
             <>
@@ -553,6 +553,15 @@ const styles = StyleSheet.create({
   },
   title: {lineHeight: 38},
 
+  // Word wrapping appears fine on
+  // mobile but overflows on desktop
+  handle: isNative
+    ? undefined
+    : {
+        // eslint-disable-next-line
+        wordBreak: 'break-all',
+      },
+
   handleLine: {
     flexDirection: 'row',
     marginBottom: 8,