fix: text ui scaling

Made text UI scaling follow OS level scailing to a limit to stop
overlapping issues

Signed-off-by: Lance Chant <13349722+lancechant@users.noreply.github.com>

components/common/Input.tsx

@@ -27,7 +27,7 @@ export function Input(props: InputProps) {
           ${isFocused ? "bg-neutral-700 border-2 border-white" : "bg-neutral-900 border-2 border-transparent"}
           text-white ${extraClassName}
         `}
-        allowFontScaling={false}
+        maxFontSizeMultiplier={1.2}
         style={[
           style,
           {
@@ -45,7 +45,7 @@ export function Input(props: InputProps) {
     <TextInput
       ref={inputRef}
       className='p-4  rounded-xl bg-neutral-900'
-      allowFontScaling={false}
+      maxFontSizeMultiplier={1.2}
       style={[{ color: "white" }, style]}
       placeholderTextColor={"#9CA3AF"}
       clearButtonMode='while-editing'

components/common/SectionHeader.tsx

@@ -19,7 +19,9 @@ export const SectionHeader: React.FC<Props> = ({
 
   return (
     <View className='px-4 flex flex-row items-center justify-between mb-2'>
-      <Text className='text-lg font-bold text-neutral-100'>{title}</Text>
+      <Text className='text-lg font-bold text-neutral-100' ellipsizeMode='tail'>
+        {title}
+      </Text>
       {shouldShowAction && (
         <TouchableOpacity
           onPress={onPressAction}
@@ -29,6 +31,7 @@ export const SectionHeader: React.FC<Props> = ({
           className='py-1 pl-3'
         >
           <Text
+            ellipsizeMode='tail'
             style={{
               color: actionDisabled ? "rgba(255,255,255,0.4)" : Colors.primary,
             }}

components/common/Text.tsx

@@ -4,7 +4,7 @@ export function Text(props: TextProps) {
   if (Platform.isTV)
     return (
       <RNText
-        allowFontScaling={false}
+        maxFontSizeMultiplier={1.3}
         style={[{ color: "white" }, style]}
         {...otherProps}
       />
@@ -12,7 +12,7 @@ export function Text(props: TextProps) {
 
   return (
     <RNText
-      allowFontScaling={false}
+      maxFontSizeMultiplier={1.3}
       style={[{ color: "white" }, style]}
       {...otherProps}
     />