Put display name and handle on one line in invite dialog (#10824)

src/components/intents/GroupChatJoinDialog.tsx

@@ -197,8 +197,7 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
     return (
       <>
         <ChainLinkBrokenIcon fill={t.palette.primary_500} size="3xl" />
-        <Text
+        <Text style={[a.text_center, a.text_lg, a.font_semi_bold]}>
-          style={[a.text_center, a.text_lg, a.font_semi_bold, t.atoms.text]}>
           <Trans>This invite link is invalid</Trans>
         </Text>
         <Button
@@ -278,7 +277,7 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
 
   return (
     <>
-      <View style={[a.py_lg, a.align_center]}>
+      <View style={[a.w_full, a.py_lg, a.align_center]}>
         <AvatarBubbles
           profiles={[
             joinLinkPreview.owner,
@@ -287,7 +286,7 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
           self
           size={135}
         />
-        <View style={[a.gap_sm, a.align_center, a.mt_lg]}>
+        <View style={[a.w_full, a.gap_sm, a.align_center, a.mt_lg]}>
           <View>
             <Text
               style={[
@@ -299,14 +298,12 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
               ]}>
               <Trans>Group chat</Trans>
             </Text>
-            <Text
+            <Text style={[a.text_center, a.text_3xl, a.font_bold]}>
-              style={[a.text_center, a.text_3xl, a.font_bold, t.atoms.text]}>
               {joinLinkPreview.name}
             </Text>
           </View>
           <View style={[a.flex_row, a.align_center]}>
-            <Text
+            <Text style={[a.text_center, a.text_xs, a.leading_snug]}>
-              style={[a.text_center, a.text_xs, a.leading_snug, t.atoms.text]}>
               <Trans comment="The number of active group chat members out of the total number allowed.">
                 {joinLinkPreview.memberCount}/{joinLinkPreview.memberLimit}{' '}
                 members
@@ -315,32 +312,40 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
             <View style={[a.flex_row, a.ml_md]}>
               <PersonGroupIcon size="xs" style={[a.mr_xs, t.atoms.text]} />
             </View>
-            <Text
+            <Text style={[a.text_center, a.text_xs, a.leading_snug]}>
-              style={[a.text_center, a.text_xs, a.leading_snug, t.atoms.text]}>
               {joinLinkPreview.joinRule === 'followedByOwner'
                 ? l`Followers can join`
                 : l`Anyone can join`}
             </Text>
           </View>
-          <View>
+          <View
-            <View
+            style={[
-              style={[a.flex_row, a.gap_xs, a.align_center, a.justify_center]}>
+              a.px_2xl,
-              <Text
+              a.w_full,
-                emoji
+              a.flex_row,
-                style={[
+              a.gap_xs,
-                  a.mb_2xs,
+              a.align_center,
-                  a.text_center,
+              a.justify_center,
-                  a.text_sm,
+            ]}>
-                  a.leading_snug,
+            <Text
-                  a.font_semi_bold,
+              emoji
-                  t.atoms.text,
+              style={[
-                ]}>
+                a.flex_shrink,
+                a.text_center,
+                a.text_sm,
+                a.leading_snug,
+                a.font_semi_bold,
+                web({minWidth: 0}),
+              ]}
+              numberOfLines={1}>
+              <Trans comment="The group chat creator, in the format 'By {displayName}'.">
                 By{' '}
                 <InlineLinkText
                   label={`@${joinLinkPreview.owner.handle}`}
                   to={makeProfileLink(joinLinkPreview.owner)}
                   style={[
-                    a.mb_2xs,
+                    a.flex_shrink,
+                    a.leading_snug,
                     a.text_sm,
                     a.font_semi_bold,
                     t.atoms.text,
@@ -368,20 +373,23 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
                     ),
                   )}
                 </InlineLinkText>
-              </Text>
+              </Trans>
-              <ProfileBadges
+            </Text>
-                profile={joinLinkPreview.owner}
+            <ProfileBadges
-                size="sm"
+              profile={joinLinkPreview.owner}
-                style={{marginTop: -3}}
+              size="sm"
-              />
+              style={{marginTop: -3}}
-            </View>
+            />
             <Text
               style={[
+                a.flex_shrink,
                 a.text_center,
-                a.text_xs,
                 a.leading_snug,
+                a.text_sm,
                 t.atoms.text_contrast_high,
-              ]}>
+                web({minWidth: 0}),
+              ]}
+              numberOfLines={1}>
               {sanitizeHandle(joinLinkPreview.owner.handle, '@')}
             </Text>
           </View>