Set max font scaling in LogBox to avoid layout breaking

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)}

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>

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>

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>

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>

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}

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>

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>

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>
   );
 }

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}

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>
   );

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;

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>

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 && (

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorCodeFrame-test.js.snap

@@ -69,6 +69,7 @@ exports[`LogBoxInspectorCodeFrame should dedupe if code frames are the same 1`]
       }
     >
       <Text
+        maxFontSizeMultiplier={1.5}
         style={
           Object {
             "color": "rgba(255, 255, 255, 0.5)",
@@ -156,6 +157,7 @@ exports[`LogBoxInspectorCodeFrame should render a code frame 1`] = `
       }
     >
       <Text
+        maxFontSizeMultiplier={1.5}
         style={
           Object {
             "color": "rgba(255, 255, 255, 0.5)",
@@ -243,6 +245,7 @@ exports[`LogBoxInspectorCodeFrame should render a code frame without a location
       }
     >
       <Text
+        maxFontSizeMultiplier={1.5}
         style={
           Object {
             "color": "rgba(255, 255, 255, 0.5)",
@@ -331,6 +334,7 @@ exports[`LogBoxInspectorCodeFrame should render both a code frame and a componen
       }
     >
       <Text
+        maxFontSizeMultiplier={1.5}
         style={
           Object {
             "color": "rgba(255, 255, 255, 0.5)",
@@ -412,6 +416,7 @@ exports[`LogBoxInspectorCodeFrame should render both a code frame and a componen
       }
     >
       <Text
+        maxFontSizeMultiplier={1.5}
         style={
           Object {
             "color": "rgba(255, 255, 255, 0.5)",

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorFooter-test.js.snap

@@ -25,6 +25,7 @@ exports[`LogBoxInspectorFooter should render no buttons and a message for syntax
   >
     <Text
       id="logbox_dismissable_text"
+      maxFontSizeMultiplier={1.5}
       style={
         Object {
           "color": "rgba(255, 255, 255, 0.6)",

packages/react-native/Libraries/LogBox/UI/__tests__/__snapshots__/LogBoxInspectorHeader-test.js.snap

@@ -38,6 +38,7 @@ exports[`LogBoxInspectorHeader should render both buttons for two total 1`] = `
     >
       <Text
         id="logbox_header_title_text"
+        maxFontSizeMultiplier={1.5}
         style={
           Object {
             "color": "rgba(255, 255, 255, 1)",
@@ -104,6 +105,7 @@ exports[`LogBoxInspectorHeader should render no buttons for one total 1`] = `
     >
       <Text
         id="logbox_header_title_text"
+        maxFontSizeMultiplier={1.5}
         style={
           Object {
             "color": "rgba(255, 255, 255, 1)",
@@ -159,6 +161,7 @@ exports[`LogBoxInspectorHeader should render syntax error header 1`] = `
     >
       <Text
         id="logbox_header_title_text"
+        maxFontSizeMultiplier={1.5}
         style={
           Object {
             "color": "rgba(255, 255, 255, 1)",
@@ -214,6 +217,7 @@ exports[`LogBoxInspectorHeader should render two buttons for three or more total
     >
       <Text
         id="logbox_header_title_text"
+        maxFontSizeMultiplier={1.5}
         style={
           Object {
             "color": "rgba(255, 255, 255, 1)",