From f8aae4a192eb81cbe551e0bf10e3f045e114eaee Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Fri, 5 Jun 2026 18:18:27 +0300
Subject: [PATCH] [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/Post/Embed/ChatInviteEmbed.tsx |  2 +-
 .../Post/Embed/JoinRequestEmbed.tsx           |  5 ++-
 src/components/ProfileBadges.tsx              | 12 ++++---
 src/components/Typography.tsx                 |  4 ++-
 src/components/dms/ChatInvite/Card.tsx        | 32 ++++++++++++-------
 src/components/dms/ChatInvite/Context.tsx     |  2 ++
 src/components/dms/ChatInvite/JoinButton.tsx  |  4 +--
 src/components/dms/ChatInvite/Root.tsx        |  4 ++-
 src/components/dms/MessageItemInviteEmbed.tsx |  3 +-
 .../Messages/components/MessageInputEmbed.tsx |  2 +-
 10 files changed, 46 insertions(+), 24 deletions(-)

diff --git a/src/components/Post/Embed/ChatInviteEmbed.tsx b/src/components/Post/Embed/ChatInviteEmbed.tsx
index f50085426f..387c3cfd9c 100644
--- a/src/components/Post/Embed/ChatInviteEmbed.tsx
+++ b/src/components/Post/Embed/ChatInviteEmbed.tsx
@@ -23,7 +23,7 @@ export function ChatInviteEmbed({
   style?: StyleProp<ViewStyle>
 }) {
   return (
-    <ChatInvite.Root code={code}>
+    <ChatInvite.Root code={code} hasFixedHeight>
       <ChatInviteEmbedBody link={link} onOpen={onOpen} style={style} />
     </ChatInvite.Root>
   )
diff --git a/src/components/Post/Embed/JoinRequestEmbed.tsx b/src/components/Post/Embed/JoinRequestEmbed.tsx
index db7ec589bb..e020bb9333 100644
--- a/src/components/Post/Embed/JoinRequestEmbed.tsx
+++ b/src/components/Post/Embed/JoinRequestEmbed.tsx
@@ -31,7 +31,10 @@ export function JoinRequestEmbed({
   if (!resolvedCode) return null
 
   return (
-    <ChatInvite.Root code={resolvedCode} initialPreview={preview}>
+    <ChatInvite.Root
+      code={resolvedCode}
+      initialPreview={preview}
+      hasFixedHeight>
       <JoinRequestEmbedBody style={style} onOpen={onOpen} />
     </ChatInvite.Root>
   )
diff --git a/src/components/ProfileBadges.tsx b/src/components/ProfileBadges.tsx
index 22c682bbba..cb257e78b6 100644
--- a/src/components/ProfileBadges.tsx
+++ b/src/components/ProfileBadges.tsx
@@ -31,10 +31,12 @@ export function ProfileBadges({
   interactive = false,
   size,
   style,
+  allowFontScaling = true,
 }: ViewStyleProp & {
   profile: bsky.profile.AnyProfileView
   interactive?: boolean
   size: Size
+  allowFontScaling?: boolean
 }) {
   const shadowed = useProfileShadow(profile)
   const verification = useSimpleVerificationState({profile})
@@ -48,10 +50,12 @@ export function ProfileBadges({
 
   const isOnTheSmallSide = size === 'xs' || size === 'sm'
 
-  const verificationIconWidth =
-    verificationIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
-  const botIconWidth =
-    botIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
+  const scaleMultiplier = allowFontScaling
+    ? nativeScaleMultiplier * alfScaleMultiplier
+    : 1
+
+  const verificationIconWidth = verificationIconSizes[size] * scaleMultiplier
+  const botIconWidth = botIconSizes[size] * scaleMultiplier
 
   return (
     <View
diff --git a/src/components/Typography.tsx b/src/components/Typography.tsx
index a65889f67e..b105ffbb8c 100644
--- a/src/components/Typography.tsx
+++ b/src/components/Typography.tsx
@@ -23,6 +23,7 @@ export function Text({
   title,
   dataSet,
   numberOfLines,
+  allowFontScaling = true,
   ...rest
 }: TextProps) {
   const {fonts, flags} = useAlf()
@@ -36,7 +37,7 @@ export function Text({
       style,
     ],
     {
-      fontScale: fonts.scaleMultiplier,
+      fontScale: allowFontScaling ? fonts.scaleMultiplier : 1,
       fontFamily: fonts.family,
       flags,
     },
@@ -57,6 +58,7 @@ export function Text({
     numberOfLines,
     style: s,
     dataSet: Object.assign({tooltip: title}, dataSet || {}),
+    allowFontScaling,
     ...rest,
   }
 
diff --git a/src/components/dms/ChatInvite/Card.tsx b/src/components/dms/ChatInvite/Card.tsx
index 518371325e..b559a9a4a3 100644
--- a/src/components/dms/ChatInvite/Card.tsx
+++ b/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>
diff --git a/src/components/dms/ChatInvite/Context.tsx b/src/components/dms/ChatInvite/Context.tsx
index 53c7a6cc22..cedcfd8d88 100644
--- a/src/components/dms/ChatInvite/Context.tsx
+++ b/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)
diff --git a/src/components/dms/ChatInvite/JoinButton.tsx b/src/components/dms/ChatInvite/JoinButton.tsx
index 0036391b0e..6f3b8c654d 100644
--- a/src/components/dms/ChatInvite/JoinButton.tsx
+++ b/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>
   )
diff --git a/src/components/dms/ChatInvite/Root.tsx b/src/components/dms/ChatInvite/Root.tsx
index a9f2c54e3a..a2cfc558ea 100644
--- a/src/components/dms/ChatInvite/Root.tsx
+++ b/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>
   )
diff --git a/src/components/dms/MessageItemInviteEmbed.tsx b/src/components/dms/MessageItemInviteEmbed.tsx
index 43fd944822..d85e7fd08a 100644
--- a/src/components/dms/MessageItemInviteEmbed.tsx
+++ b/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>
diff --git a/src/screens/Messages/components/MessageInputEmbed.tsx b/src/screens/Messages/components/MessageInputEmbed.tsx
index a73a6564fb..21503ce8fa 100644
--- a/src/screens/Messages/components/MessageInputEmbed.tsx
+++ b/src/screens/Messages/components/MessageInputEmbed.tsx
@@ -273,7 +273,7 @@ function MessageInputInviteEmbed({
   const {t: l} = useLingui()
 
   return (
-    <ChatInvite.Root code={code}>
+    <ChatInvite.Root code={code} hasFixedHeight={false}>
       <View
         style={[
           a.flex_1,