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/Button.tsx

@@ -144,7 +144,10 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
             ${colorClasses}
             ${className}`}
         >
-          <Text className={`${textColorClass} text-xl font-bold`}>
+          <Text
+            className={`${textColorClass} text-xl font-bold`}
+            ellipsizeMode='tail'
+          >
             {children}
           </Text>
         </View>
@@ -186,6 +189,7 @@ export const Button: React.FC<PropsWithChildren<ButtonProps>> = ({
           ${iconRight ? "mr-2" : ""}
           ${iconLeft ? "ml-2" : ""}
         `}
+            ellipsizeMode='tail'
           >
             {children}
           </Text>