From 90f8fe59ba1ac1ef4e8e005d235b96f1d57faa45 Mon Sep 17 00:00:00 2001
From: DS Boyce <260543580+ds-boyce@users.noreply.github.com>
Date: Wed, 10 Jun 2026 09:17:09 -0700
Subject: [PATCH] Put display name and handle on one line in invite dialog
 (#10824)

---
 .../intents/GroupChatJoinDialog.tsx           | 74 ++++++++++---------
 1 file changed, 41 insertions(+), 33 deletions(-)

diff --git a/src/components/intents/GroupChatJoinDialog.tsx b/src/components/intents/GroupChatJoinDialog.tsx
index e8b28e6abd..8efe67cbb9 100644
--- a/src/components/intents/GroupChatJoinDialog.tsx
+++ b/src/components/intents/GroupChatJoinDialog.tsx
@@ -197,8 +197,7 @@ function GroupChatJoinDialogContent({code}: {code?: string}) {
     return (
       <>
         <ChainLinkBrokenIcon fill={t.palette.primary_500} size="3xl" />
-        <Text
-          style={[a.text_center, a.text_lg, a.font_semi_bold, t.atoms.text]}>
+        <Text style={[a.text_center, a.text_lg, a.font_semi_bold]}>
           <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
-              style={[a.text_center, a.text_3xl, a.font_bold, t.atoms.text]}>
+            <Text style={[a.text_center, a.text_3xl, a.font_bold]}>
               {joinLinkPreview.name}
             </Text>
           </View>
           <View style={[a.flex_row, a.align_center]}>
-            <Text
-              style={[a.text_center, a.text_xs, a.leading_snug, t.atoms.text]}>
+            <Text style={[a.text_center, a.text_xs, a.leading_snug]}>
               <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
-              style={[a.text_center, a.text_xs, a.leading_snug, t.atoms.text]}>
+            <Text style={[a.text_center, a.text_xs, a.leading_snug]}>
               {joinLinkPreview.joinRule === 'followedByOwner'
                 ? l`Followers can join`
                 : l`Anyone can join`}
             </Text>
           </View>
-          <View>
-            <View
-              style={[a.flex_row, a.gap_xs, a.align_center, a.justify_center]}>
-              <Text
-                emoji
-                style={[
-                  a.mb_2xs,
-                  a.text_center,
-                  a.text_sm,
-                  a.leading_snug,
-                  a.font_semi_bold,
-                  t.atoms.text,
-                ]}>
+          <View
+            style={[
+              a.px_2xl,
+              a.w_full,
+              a.flex_row,
+              a.gap_xs,
+              a.align_center,
+              a.justify_center,
+            ]}>
+            <Text
+              emoji
+              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>
-              <ProfileBadges
-                profile={joinLinkPreview.owner}
-                size="sm"
-                style={{marginTop: -3}}
-              />
-            </View>
+              </Trans>
+            </Text>
+            <ProfileBadges
+              profile={joinLinkPreview.owner}
+              size="sm"
+              style={{marginTop: -3}}
+            />
             <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>