fix: handle large fonts with twelve word seed phrases (valora-inc#5187)

### Description

Currently large fonts can display the 12 word seed phrase with letters
rendered off screen or covered index numbers. This PR fixes that by
using the fontScale to display as either four rows with three columns or
six rows with two columns.

### Screenshots

| iOS Large Font (Before) | iOS Large Font (After) | iOS Default Font
(Before) | iOS Default Font (After) |
| ----- | ----- | ----- | ----- |
|
![](https://github.com/valora-inc/wallet/assets/26950305/ca0a363b-404c-4051-8644-efe422a4a8e7)
|
![](https://github.com/valora-inc/wallet/assets/26950305/828ee414-8408-4b8c-9685-b853ef8812eb)
|
![](https://github.com/valora-inc/wallet/assets/26950305/60fe83d7-fd40-4e93-8c7f-676e733515bc)
|
![](https://github.com/valora-inc/wallet/assets/26950305/9e822939-3884-4d41-8c36-bd44a1a57cfc)
|

| Android Large Font (Before) | Android Large Font (After) | Android
Default Font (Before) | Android Default Font (After) |
| ----- | ----- | ----- | ----- |
|
![](https://github.com/valora-inc/wallet/assets/26950305/ae204b44-1026-419b-a3c1-42a9e63d7c2e)
|
![](https://github.com/valora-inc/wallet/assets/26950305/fb1aadf9-55af-4e20-888e-93c87b4047b2)
|
![](https://github.com/valora-inc/wallet/assets/26950305/8eaa9eb9-3520-48b5-8596-a050c546e67d)
|
![](https://github.com/valora-inc/wallet/assets/26950305/8da1b5ed-38e6-4adf-b6f5-2daf7857ba15)
|

### Test plan

- Tested locally on iOS
- Tested locally on Android

### Related issues

- Fixes ACT-1073

### Backwards compatibility

Yes

### Network scalability

N/A

src/backup/BackupPhraseContainer.tsx

@@ -1,14 +1,15 @@
 import Clipboard from '@react-native-clipboard/clipboard'
 import * as React from 'react'
 import { WithTranslation } from 'react-i18next'
-import { StyleSheet, Text, TextInput, View, ViewStyle } from 'react-native'
+import { StyleSheet, Text, TextInput, View, ViewStyle, useWindowDimensions } from 'react-native'
 import { isValidBackupPhrase } from 'src/backup/utils'
 import Touchable from 'src/components/Touchable'
 import withTextInputPasteAware from 'src/components/WithTextInputPasteAware'
 import { withTranslation } from 'src/i18n'
 import colors from 'src/styles/colors'
 import fontStyles from 'src/styles/fonts'
 import { vibrateInformative } from 'src/styles/hapticFeedback'
+import { Spacing } from 'src/styles/styles'
 import Logger from 'src/utils/Logger'
 
 const PhraseInput = withTextInputPasteAware(TextInput, { top: undefined, right: 12, bottom: 12 })
@@ -18,17 +19,23 @@ type TwelveWordTableProps = {
 }
 
 function TwelveWordTable({ words }: TwelveWordTableProps) {
+  const { fontScale } = useWindowDimensions()
   return (
-    <>
+    <View style={styles.twelveWordTable}>
       {words.map((word, index) => (
-        <View key={index} style={styles.indexWordContainer}>
-          <Text style={styles.indexText}>{index + 1}</Text>
-          <Text key={index} style={styles.wordText}>
+        <View
+          key={index}
+          style={[styles.wordContainer, fontScale > 1.5 ? { width: '50%' } : { width: '33%' }]}
+        >
+          <Text adjustsFontSizeToFit={true} style={styles.indexText}>
+            {index + 1}
+          </Text>
+          <Text numberOfLines={1} adjustsFontSizeToFit={true} style={styles.wordText} key={index}>
             {word}
           </Text>
         </View>
       ))}
-    </>
+    </View>
   )
 }
 
@@ -153,20 +160,20 @@ const styles = StyleSheet.create({
   indexText: {
     ...fontStyles.regular,
     color: colors.gray4,
-    marginRight: 8,
-    lineHeight: 24,
   },
-  wordText: {
-    ...fontStyles.regular,
-    lineHeight: 24,
+  twelveWordTable: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    marginHorizontal: Spacing.Small12,
   },
-  indexWordContainer: {
-    flexGrow: 1,
-    flexShrink: 1,
-    flexBasis: '30%',
+  wordContainer: {
     flexDirection: 'row',
+    gap: Spacing.Smallest8,
+    alignItems: 'center',
     marginVertical: 11,
-    marginLeft: '3%',
+  },
+  wordText: {
+    ...fontStyles.regular,
   },
   phraseContainer: {
     flexWrap: 'wrap',