[Chat] Disable font scaling on fixed-height chat invite cards (#10744)

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/components/dms/ChatInvite/Card.tsx

@@ -16,7 +16,7 @@ import {useChatInvite} from './Context'
  */
 export function Card({size}: {size: 'large' | 'small'}) {
   const t = useTheme()
-  const {preview} = useChatInvite()
+  const {preview, hasFixedHeight} = useChatInvite()
 
   if (!preview) return null
 
@@ -31,14 +31,15 @@ export function Card({size}: {size: 'large' | 'small'}) {
         <Text
           emoji
           style={[size === 'large' ? a.text_lg : a.text_md, a.font_bold]}
-          numberOfLines={1}>
+          numberOfLines={1}
+          allowFontScaling={!hasFixedHeight}>
           {preview.name}
         </Text>
         <View style={[a.flex_row, a.align_center, a.gap_sm]}>
           <Text
             style={[a.text_2xs, a.font_medium, t.atoms.text_contrast_high]}
-            allowFontScaling
-            numberOfLines={1}>
+            numberOfLines={1}
+            allowFontScaling={!hasFixedHeight}>
             <Trans>Group chat</Trans>
           </Text>
           <Text
@@ -48,8 +49,8 @@ export function Card({size}: {size: 'large' | 'small'}) {
               a.font_medium,
               t.atoms.text_contrast_high,
             ]}
-            allowFontScaling
-            numberOfLines={1}>
+            numberOfLines={1}
+            allowFontScaling={!hasFixedHeight}>
             <Trans comment="The number of members in a group chat, in the format '{members}/{total} members'.">
               {preview.memberCount}/{preview.memberLimit}{' '}
               <Plural
@@ -70,17 +71,24 @@ export function Card({size}: {size: 'large' | 'small'}) {
           <Text
             emoji
             style={[a.flex_shrink, a.text_sm, a.font_medium]}
-            allowFontScaling
-            numberOfLines={1}>
+            numberOfLines={1}
+            allowFontScaling={!hasFixedHeight}>
             <Trans comment="The group chat creator, in the format 'By {displayName}'.">
-              By <Text style={[a.font_medium]}>{ownerDisplayName}</Text>
+              By{' '}
+              <Text style={[a.font_medium]} allowFontScaling={!hasFixedHeight}>
+                {ownerDisplayName}
+              </Text>
             </Trans>
           </Text>
-          <ProfileBadges profile={preview.owner} size="sm" />
+          <ProfileBadges
+            profile={preview.owner}
+            size="sm"
+            allowFontScaling={!hasFixedHeight}
+          />
           <Text
             style={[a.flex_shrink, t.atoms.text_contrast_medium]}
-            allowFontScaling
-            numberOfLines={1}>
+            numberOfLines={1}
+            allowFontScaling={!hasFixedHeight}>
             {ownerHandle}
           </Text>
         </View>

src/components/dms/ChatInvite/Context.tsx

@@ -32,6 +32,8 @@ export type ChatInviteContextValue = {
    * preview to act on.
    */
   action: ChatInviteAction | undefined
+  /** Whether the invite is rendered inside a fixed-height container; when true, text inside disables font scaling so the card doesn't overflow. */
+  hasFixedHeight: boolean
 }
 
 const ChatInviteContext = createContext<ChatInviteContextValue | null>(null)

src/components/dms/ChatInvite/JoinButton.tsx

@@ -17,7 +17,7 @@ export function JoinButton({
   onPress?: () => void
   style?: StyleProp<ViewStyle>
 }) {
-  const {action} = useChatInvite()
+  const {action, hasFixedHeight} = useChatInvite()
 
   if (!action) return null
 
@@ -35,7 +35,7 @@ export function JoinButton({
       disabled={action.disabled}
       style={[a.w_full, style]}>
       {action.side === 'left' && <ButtonIcon icon={action.icon} />}
-      <ButtonText>{action.label}</ButtonText>
+      <ButtonText allowFontScaling={!hasFixedHeight}>{action.label}</ButtonText>
       {action.side === 'right' && <ButtonIcon icon={action.icon} />}
     </Button>
   )

src/components/dms/ChatInvite/Root.tsx

@@ -30,6 +30,7 @@ export function Root({
   code,
   initialPreview,
   currentConvoId,
+  hasFixedHeight,
   children,
 }: {
   code: string
@@ -40,6 +41,7 @@ export function Root({
    * open/join (you're already here).
    */
   currentConvoId?: string
+  hasFixedHeight: boolean
   children: React.ReactNode
 }) {
   const {hasSession} = useSession()
@@ -137,7 +139,7 @@ export function Root({
 
   return (
     <ChatInviteProvider
-      value={{code, loading, error: !!error, preview, action}}>
+      value={{code, loading, error: !!error, preview, action, hasFixedHeight}}>
       {children}
     </ChatInviteProvider>
   )

src/components/dms/MessageItemInviteEmbed.tsx

@@ -74,7 +74,8 @@ let MessageItemInviteEmbed = ({
           <ChatInvite.Root
             code={embed.joinLinkPreview.code}
             initialPreview={embed.joinLinkPreview}
-            currentConvoId={convo.convo.view.id}>
+            currentConvoId={convo.convo.view.id}
+            hasFixedHeight={false}>
             <ChatInvite.Card size="small" />
             <ChatInvite.JoinButton />
           </ChatInvite.Root>