[Android / iOS] Code blocks are overflowing the app border

src/components/InlineCodeBlock/WrappedText.tsx

@@ -3,7 +3,9 @@ import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import Text from '@components/Text';
 import useThemeStyles from '@hooks/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import {containsOnlyEmojis} from '@libs/EmojiUtils';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 
@@ -40,14 +42,29 @@ function containsEmoji(text: string): boolean {
     return CONST.REGEX.EMOJIS.test(text);
 }
 
+/**
+ * Splits long words into multiple strings
+ */
+function splitLongWord(word: string, maxLength: number): string[] {
+    if (word.length <= maxLength) {
+        return [word];
+    }
+
+    return word.match(new RegExp(`.{1,${maxLength}}`, 'g')) ?? [];
+}
+
 function WrappedText({children, wordStyles, textStyles}: WrappedTextProps) {
     const styles = useThemeStyles();
+    const {windowWidth} = useWindowDimensions();
 
     if (typeof children !== 'string') {
         return null;
     }
 
-    const textMatrix = getTextMatrix(children);
+    const charWidth = variables.fontSizeLabel * variables.fontSizeToWidthRatio;
+    const charsPerLine = Math.floor(windowWidth / charWidth);
+
+    const textMatrix = getTextMatrix(children).map((row) => row.flatMap((word) => splitLongWord(word, charsPerLine)));
 
     return textMatrix.map((rowText, rowIndex) => (
         <Fragment

src/styles/variables.ts

@@ -215,6 +215,7 @@ export default {
     onboardingModalWidth: 500,
     welcomeVideoDelay: 1000,
     explanationModalDelay: 2000,
+    fontSizeToWidthRatio: getValueUsingPixelRatio(0.8, 1),
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility