Set max font scaling in LogBox to avoid layout breaking (#57333)

pchalupa · meta-codesync[bot] · commit 4aef2b0126c2 · 2026-07-01T05:45:26.000-07:00
Summary: Fixes `LogBox` layout while using accessibility font multiplier. I was aiming for the highest possible value without breaking the UI. Max scales are mostly set to 1.5 and less when needed. <img width="1206" height="2622" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-04 at 19 39 35" src="https://github.com/user-attachments/assets/f59b426b-44fe-4ad0-bb52-2e9ee286073e" /> <img width="1206" height="2622" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-04 at 19 39 47" src="https://github.com/user-attachments/assets/b4b4d871-f21b-45b2-accf-be1b58e6c881" /> <img width="1206" height="2622" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-04 at 19 39 40" src="https://github.com/user-attachments/assets/006dd5bb-4525-491c-8f3f-ddcd211615da" /> <img width="1206" height="2622" alt="Simulator Screenshot - iPhone 17 Pro - 2026-05-04 at 19 41 01" src="https://github.com/user-attachments/assets/d7029511-878c-4c0b-a7d0-b7c7a6abaa9c" /> https://github.com/user-attachments/assets/507ba38d-6338-4e33-b3d0-cbf54e108ac3 ## Changelog:  [GENERAL] [FIXED] - Set max font scaling in `LogBox` to avoid layout breaking Pull Request resolved: #57333 Test Plan: 1. Set the max text size on your testing device. 2. Log or throw an error in the playground. Reviewed By: ellemac123 Differential Revision: D110045786 Pulled By: javache fbshipit-source-id: cdd94437a54443a04d724f250c4b5ac1da059b34
diff --git a/packages/react-native/Libraries/LogBox/UI/AnsiHighlight.js b/packages/react-native/Libraries/LogBox/UI/AnsiHighlight.js
@@ -87,7 +87,7 @@ export default function Ansi({
     <View style={styles.container}>
       {parsedLines.map((items, i) => (
         <View style={styles.line} key={i}>
-          <Text style={styles.text}>
+          <Text maxFontSizeMultiplier={1.5} style={styles.text}>
             {items.map((bundle, key) => {
               const textStyle =
                 bundle.fg && COLORS[bundle.fg]
@@ -101,6 +101,7 @@ export default function Ansi({
               return (
                 <Text
                   id="logbox_codeframe_contents_text"
+                  maxFontSizeMultiplier={1.5}
                   style={[style, textStyle]}
                   key={key}>
                   {getText(bundle.content, key)}
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js
@@ -63,7 +63,7 @@ component CodeFrameDisplay(codeFrame: CodeFrame) {
         onPress={() => {
           openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
         }}>
-        <Text style={styles.fileText}>
+        <Text maxFontSizeMultiplier={1.5} style={styles.fileText}>
           {getFileName()}
           {getLocation()}
         </Text>
@@ -116,7 +116,7 @@ component AppInfo() {
       }}
       style={appInfoStyles.buildButton}
       onPress={appInfo.onPress}>
-      <Text style={appInfoStyles.text}>
+      <Text maxFontSizeMultiplier={1.5} style={appInfoStyles.text}>
         {appInfo.appVersion} ({appInfo.engine})
       </Text>
     </LogBoxButton>
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooter.js
@@ -29,7 +29,10 @@ export default function LogBoxInspectorFooter(props: Props): React.Node {
     return (
       <View style={styles.root}>
         <View style={styles.button}>
-          <Text id="logbox_dismissable_text" style={styles.syntaxErrorText}>
+          <Text
+            id="logbox_dismissable_text"
+            maxFontSizeMultiplier={1.5}
+            style={styles.syntaxErrorText}>
             This error cannot be dismissed.
           </Text>
         </View>
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorFooterButton.js
@@ -35,7 +35,9 @@ export default function LogBoxInspectorFooterButton(
         }}
         onPress={props.onPress}>
         <View style={styles.buttonContent}>
-          <Text style={styles.buttonLabel}>{props.text}</Text>
+          <Text maxFontSizeMultiplier={1.5} style={styles.buttonLabel}>
+            {props.text}
+          </Text>
         </View>
       </LogBoxButton>
     </SafeAreaView>
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorHeader.js
@@ -36,7 +36,10 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
       <LogBoxInspectorHeaderSafeArea style={styles[props.level]}>
         <View style={styles.header}>
           <View style={styles.title}>
-            <Text style={styles.titleText} id="logbox_header_title_text">
+            <Text
+              id="logbox_header_title_text"
+              maxFontSizeMultiplier={1.5}
+              style={styles.titleText}>
               Failed to compile
             </Text>
           </View>
@@ -63,7 +66,10 @@ export default function LogBoxInspectorHeader(props: Props): React.Node {
           onPress={() => props.onSelectIndex(prevIndex)}
         />
         <View style={styles.title}>
-          <Text style={styles.titleText} id="logbox_header_title_text">
+          <Text
+            id="logbox_header_title_text"
+            maxFontSizeMultiplier={1.5}
+            style={styles.titleText}>
             {titleText}
           </Text>
         </View>
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js
@@ -32,7 +32,10 @@ component LogBoxInspectorMessageHeader(
       return null;
     }
     return (
-      <Text style={messageStyles.collapse} onPress={() => onPress()}>
+      <Text
+        maxFontSizeMultiplier={1.5}
+        style={messageStyles.collapse}
+        onPress={() => onPress()}>
         ... See More
       </Text>
     );
@@ -42,12 +45,16 @@ component LogBoxInspectorMessageHeader(
     <View style={messageStyles.body}>
       <View style={messageStyles.heading}>
         <Text
+          maxFontSizeMultiplier={1.5}
           style={[messageStyles.headingText, messageStyles[level]]}
           id="logbox_message_title_text">
           {title}
         </Text>
       </View>
-      <Text style={messageStyles.bodyText} id="logbox_message_contents_text">
+      <Text
+        maxFontSizeMultiplier={1.5}
+        style={messageStyles.bodyText}
+        id="logbox_message_contents_text">
         <LogBoxMessage
           maxLength={collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
           message={message}
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js
@@ -101,13 +101,24 @@ component LogBoxInspectorReactFrames(log: LogBoxLog) {
             <View style={componentStyles.component}>
               <Text
                 id="logbox_component_stack_frame_text"
+                maxFontSizeMultiplier={1.5}
                 style={componentStyles.frameName}>
-                <Text style={componentStyles.bracket}>{'<'}</Text>
+                <Text
+                  maxFontSizeMultiplier={1.5}
+                  style={componentStyles.bracket}>
+                  {'<'}
+                </Text>
                 {frame.methodName}
-                <Text style={componentStyles.bracket}>{' />'}</Text>
+                <Text
+                  maxFontSizeMultiplier={1.5}
+                  style={componentStyles.bracket}>
+                  {' />'}
+                </Text>
               </Text>
             </View>
-            <Text style={componentStyles.frameLocation}>
+            <Text
+              maxFontSizeMultiplier={1.5}
+              style={componentStyles.frameLocation}>
               {frame.file != null ? getPrettyFileName(frame.file) : ''}
               {frame.lineNumber != null ? `:${frame.lineNumber}` : ''}
             </Text>
@@ -122,7 +133,9 @@ component LogBoxInspectorReactFrames(log: LogBoxLog) {
           }}
           onPress={() => setCollapsed(!collapsed)}
           style={componentStyles.collapseButton}>
-          <Text style={componentStyles.collapse}>{getCollapseMessage()}</Text>
+          <Text maxFontSizeMultiplier={1.5} style={componentStyles.collapse}>
+            {getCollapseMessage()}
+          </Text>
         </LogBoxButton>
       </View>
     </LogBoxInspectorSection>
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSection.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSection.js
@@ -22,7 +22,9 @@ component LogBoxInspectorSection(
   return (
     <View style={styles.section}>
       <View style={styles.heading}>
-        <Text style={styles.headingText}>{heading}</Text>
+        <Text maxFontSizeMultiplier={1.5} style={styles.headingText}>
+          {heading}
+        </Text>
         {action}
       </View>
       <View style={styles.body}>{children}</View>
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js
@@ -103,7 +103,9 @@ component LogBoxInspectorSourceMapStatus(
             : {transform: [{rotate: state.rotate}]},
         ]}
       />
-      <Text style={[styles.text, {color}]}>Source Map</Text>
+      <Text maxFontSizeMultiplier={1.5} style={[styles.text, {color}]}>
+        Source Map
+      </Text>
     </LogBoxButton>
   );
 }
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js
@@ -44,11 +44,13 @@ component LogBoxInspectorStackFrame(
         style={styles.frame}>
         <Text
           id="logbox_stack_frame_text"
+          maxFontSizeMultiplier={1.5}
           style={[styles.name, frame.collapse === true && styles.dim]}>
           {frame.methodName}
         </Text>
         <Text
           ellipsizeMode="middle"
+          maxFontSizeMultiplier={1.5}
           numberOfLines={1}
           style={[styles.location, frame.collapse === true && styles.dim]}>
           {location}
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js b/packages/react-native/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js
@@ -89,7 +89,7 @@ component LogBoxInspectorStackFrames(log: LogBoxLog, onRetry: () => void) {
       }>
       {log.symbolicated.status !== 'COMPLETE' && (
         <View style={stackStyles.hintBox}>
-          <Text style={stackStyles.hintText}>
+          <Text maxFontSizeMultiplier={1.5} style={stackStyles.hintText}>
             This call stack is not symbolicated. Some features are unavailable
             such as viewing the function name or tapping to open files.
           </Text>
@@ -138,7 +138,9 @@ component StackFrameFooter(message: string, onPress: () => void) {
         }}
         onPress={onPress}
         style={stackStyles.collapseButton}>
-        <Text style={stackStyles.collapse}>{message}</Text>
+        <Text maxFontSizeMultiplier={1.5} style={stackStyles.collapse}>
+          {message}
+        </Text>
       </LogBoxButton>
     </View>
   );
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js b/packages/react-native/Libraries/LogBox/UI/LogBoxMessage.js
@@ -43,7 +43,11 @@ component TappableLinks(content: string, style: void | TextStyleProp) {
 
   if (matches.length === 0) {
     // No URLs detected. Just return the content.
-    return <Text style={style}>{content}</Text>;
+    return (
+      <Text maxFontSizeMultiplier={1.5} style={style}>
+        {content}
+      </Text>
+    );
   }
 
   // URLs were detected. Construct array of Text nodes.
@@ -55,7 +59,11 @@ component TappableLinks(content: string, style: void | TextStyleProp) {
   for (const linkRange of matches) {
     if (startIndex < linkRange.lowerBound) {
       const text = content.substring(startIndex, linkRange.lowerBound);
-      fragments.push(<Text key={++indexCounter}>{text}</Text>);
+      fragments.push(
+        <Text key={++indexCounter} maxFontSizeMultiplier={1.5}>
+          {text}
+        </Text>,
+      );
     }
 
     const link = content.substring(linkRange.lowerBound, linkRange.upperBound);
@@ -66,6 +74,7 @@ component TappableLinks(content: string, style: void | TextStyleProp) {
           Linking.openURL(link);
         }}
         key={++indexCounter}
+        maxFontSizeMultiplier={1.5}
         style={styles.linkText}>
         {link}
       </Text>,
@@ -77,13 +86,17 @@ component TappableLinks(content: string, style: void | TextStyleProp) {
   if (startIndex < content.length) {
     const text = content.substring(startIndex);
     fragments.push(
-      <Text key={++indexCounter} style={style}>
+      <Text key={++indexCounter} maxFontSizeMultiplier={1.5} style={style}>
         {text}
       </Text>,
     );
   }
 
-  return <Text style={style}>{fragments}</Text>;
+  return (
+    <Text maxFontSizeMultiplier={1.5} style={style}>
+      {fragments}
+    </Text>
+  );
 }
 
 const cleanContent = (content: string) =>
@@ -98,7 +111,7 @@ component LogBoxMessage(
   const {content, substitutions}: Message = message;
 
   if (plaintext === true) {
-    return <Text>{cleanContent(content)}</Text>;
+    return <Text maxFontSizeMultiplier={1}>{cleanContent(content)}</Text>;
   }
 
   const resolvedMaxLength = maxLength != null ? maxLength : Infinity;
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js b/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationCountBadge.js
@@ -24,7 +24,10 @@ export default function LogBoxNotificationCountBadge(props: {
        * when fixing the type of `StyleSheet.create`. Remove this comment to
        * see the error. */}
       <View style={[styles.inside, styles[props.level]]}>
-        <Text id="logbox_notification_count_text" style={styles.text}>
+        <Text
+          id="logbox_notification_count_text"
+          maxFontSizeMultiplier={1}
+          style={styles.text}>
           {props.count <= 1 ? '!' : props.count}
         </Text>
       </View>
diff --git a/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationMessage.js b/packages/react-native/Libraries/LogBox/UI/LogBoxNotificationMessage.js
@@ -24,6 +24,7 @@ export default function LogBoxNotificationMessage(props: {
     <View style={styles.container}>
       <Text
         id="logbox_notification_message_text"
+        maxFontSizeMultiplier={1}
         numberOfLines={1}
         style={styles.text}>
         {props.message && (
