From 0e5c3215f378be5972414f8fd092c49e7dc6e820 Mon Sep 17 00:00:00 2001
From: Lance Chant <13349722+lancechant@users.noreply.github.com>
Date: Mon, 19 Jan 2026 14:59:11 +0200
Subject: [PATCH] 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                         |  6 ++++-
 components/JellyfinServerDiscovery.tsx        |  2 +-
 components/PlayButton.tsx                     | 12 ++++++---
 components/PlayButton.tv.tsx                  |  7 ++++--
 components/ThemedText.tsx                     |  1 +
 .../apple-tv-carousel/AppleTVCarousel.tsx     |  2 ++
 components/common/Input.tsx                   |  4 +--
 components/common/SectionHeader.tsx           |  5 +++-
 components/common/Text.tsx                    |  4 +--
 components/home/Favorites.tsx                 | 10 ++++++--
 components/settings/KefinTweaks.tsx           |  4 +--
 .../video-player/controls/SkipButton.tsx      |  4 ++-
 .../video-player/controls/SliderScrubbter.tsx | 11 ++++++--
 .../controls/TechnicalInfoOverlay.tsx         | 25 +++++++++++++------
 14 files changed, 70 insertions(+), 27 deletions(-)

diff --git a/components/Button.tsx b/components/Button.tsx
index 03df8967..75f45017 100644
--- a/components/Button.tsx
+++ b/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>
diff --git a/components/JellyfinServerDiscovery.tsx b/components/JellyfinServerDiscovery.tsx
index 689b266e..769e5ff1 100644
--- a/components/JellyfinServerDiscovery.tsx
+++ b/components/JellyfinServerDiscovery.tsx
@@ -17,7 +17,7 @@ const JellyfinServerDiscovery: React.FC<Props> = ({ onServerSelect }) => {
   return (
     <View className='mt-2'>
       <Button onPress={startDiscovery} color='black'>
-        <Text className='text-white text-center'>
+        <Text maxFontSizeMultiplier={1.2} className='text-white text-center'>
           {isSearching
             ? t("server.searching")
             : t("server.search_for_local_servers")}
diff --git a/components/PlayButton.tsx b/components/PlayButton.tsx
index 1c3fd46f..b9c02d1b 100644
--- a/components/PlayButton.tsx
+++ b/components/PlayButton.tsx
@@ -532,18 +532,24 @@ export const PlayButton: React.FC<Props> = ({
         className='flex flex-row items-center justify-center bg-transparent rounded-full z-20 h-12 w-full '
       >
         <View className='flex flex-row items-center space-x-2'>
-          <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
+          <Animated.Text
+            style={[animatedTextStyle, { fontWeight: "bold" }]}
+            maxFontSizeMultiplier={1.2}
+          >
             {runtimeTicksToMinutes(
               (item?.RunTimeTicks || 0) -
                 (item?.UserData?.PlaybackPositionTicks || 0),
             )}
             {(item?.UserData?.PlaybackPositionTicks || 0) > 0 && " left"}
           </Animated.Text>
-          <Animated.Text style={animatedTextStyle}>
+          <Animated.Text style={animatedTextStyle} maxFontSizeMultiplier={1.2}>
             <Ionicons name='play-circle' size={24} />
           </Animated.Text>
           {client && (
-            <Animated.Text style={animatedTextStyle}>
+            <Animated.Text
+              style={animatedTextStyle}
+              maxFontSizeMultiplier={1.2}
+            >
               <Feather name='cast' size={22} />
               <CastButton tintColor='transparent' />
             </Animated.Text>
diff --git a/components/PlayButton.tv.tsx b/components/PlayButton.tv.tsx
index f79a3174..14e53a53 100644
--- a/components/PlayButton.tv.tsx
+++ b/components/PlayButton.tv.tsx
@@ -198,10 +198,13 @@ export const PlayButton: React.FC<Props> = ({
         className='flex flex-row items-center justify-center bg-transparent rounded-xl z-20 h-12 w-full '
       >
         <View className='flex flex-row items-center space-x-2'>
-          <Animated.Text style={[animatedTextStyle, { fontWeight: "bold" }]}>
+          <Animated.Text
+            style={[animatedTextStyle, { fontWeight: "bold" }]}
+            maxFontSizeMultiplier={1.2}
+          >
             {runtimeTicksToMinutes(item?.RunTimeTicks)}
           </Animated.Text>
-          <Animated.Text style={animatedTextStyle}>
+          <Animated.Text style={animatedTextStyle} maxFontSizeMultiplier={1.2}>
             <Ionicons name='play-circle' size={24} />
           </Animated.Text>
         </View>
diff --git a/components/ThemedText.tsx b/components/ThemedText.tsx
index 6b6a83f2..b5ea8008 100644
--- a/components/ThemedText.tsx
+++ b/components/ThemedText.tsx
@@ -13,6 +13,7 @@ export function ThemedText({
 }: ThemedTextProps) {
   return (
     <Text
+      maxFontSizeMultiplier={1.3}
       style={[
         { color: "white" },
         type === "default" ? styles.default : undefined,
diff --git a/components/apple-tv-carousel/AppleTVCarousel.tsx b/components/apple-tv-carousel/AppleTVCarousel.tsx
index 82c0f7b4..63e2ad01 100644
--- a/components/apple-tv-carousel/AppleTVCarousel.tsx
+++ b/components/apple-tv-carousel/AppleTVCarousel.tsx
@@ -736,6 +736,7 @@ export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
         >
           <TouchableOpacity onPress={() => navigateToItem(item)}>
             <Animated.Text
+              maxFontSizeMultiplier={1.2}
               style={{
                 color: `rgba(255, 255, 255, ${TEXT_OPACITY})`,
                 fontSize: GENRES_FONT_SIZE,
@@ -801,6 +802,7 @@ export const AppleTVCarousel: React.FC<AppleTVCarouselProps> = ({
             >
               <TouchableOpacity onPress={() => navigateToItem(item)}>
                 <Animated.Text
+                  maxFontSizeMultiplier={1.2}
                   numberOfLines={OVERVIEW_MAX_LINES}
                   style={{
                     color: `rgba(255, 255, 255, ${TEXT_OPACITY * 0.85})`,
diff --git a/components/common/Input.tsx b/components/common/Input.tsx
index 8d7f602f..d2e4ded6 100644
--- a/components/common/Input.tsx
+++ b/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'
diff --git a/components/common/SectionHeader.tsx b/components/common/SectionHeader.tsx
index aa9efc43..620f1088 100644
--- a/components/common/SectionHeader.tsx
+++ b/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,
             }}
diff --git a/components/common/Text.tsx b/components/common/Text.tsx
index 739177d7..0ed8d18a 100644
--- a/components/common/Text.tsx
+++ b/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}
     />
diff --git a/components/home/Favorites.tsx b/components/home/Favorites.tsx
index 84fa36b9..41ac268e 100644
--- a/components/home/Favorites.tsx
+++ b/components/home/Favorites.tsx
@@ -175,10 +175,16 @@ export const Favorites = () => {
             contentFit='contain'
             source={heart}
           />
-          <Text className='text-xl font-semibold text-white mb-2'>
+          <Text
+            maxFontSizeMultiplier={1.2}
+            className='text-xl font-semibold text-white mb-2'
+          >
             {t("favorites.noDataTitle")}
           </Text>
-          <Text className='text-base text-white/70 text-center max-w-xs px-4'>
+          <Text
+            maxFontSizeMultiplier={1.2}
+            className='text-base text-white/70 text-center max-w-xs px-4'
+          >
             {t("favorites.noData")}
           </Text>
         </View>
diff --git a/components/settings/KefinTweaks.tsx b/components/settings/KefinTweaks.tsx
index 228b4692..b7ab962c 100644
--- a/components/settings/KefinTweaks.tsx
+++ b/components/settings/KefinTweaks.tsx
@@ -11,12 +11,12 @@ export const KefinTweaksSettings = () => {
   return (
     <View className=''>
       <View className='flex flex-col rounded-xl overflow-hidden p-4 bg-neutral-900'>
-        <Text className='text-xs text-red-600 mb-2'>
+        <Text maxFontSizeMultiplier={1.2} className='text-xs text-red-600 mb-2'>
           {t("home.settings.plugins.kefinTweaks.watchlist_enabler")}
         </Text>
 
         <View className='flex flex-row items-center justify-between mt-2'>
-          <Text className='text-white'>
+          <Text maxFontSizeMultiplier={1.2} className='text-white'>
             {isEnabled ? t("Watchlist On") : t("Watchlist Off")}
           </Text>
 
diff --git a/components/video-player/controls/SkipButton.tsx b/components/video-player/controls/SkipButton.tsx
index 016f94d1..18fcaa16 100644
--- a/components/video-player/controls/SkipButton.tsx
+++ b/components/video-player/controls/SkipButton.tsx
@@ -19,7 +19,9 @@ const SkipButton: React.FC<SkipButtonProps> = ({
         onPress={onPress}
         className='bg-black/60 rounded-md px-3 py-3 border border-neutral-900'
       >
-        <Text className='text-white font-bold'>{buttonText}</Text>
+        <Text maxFontSizeMultiplier={1.2} className='text-white font-bold'>
+          {buttonText}
+        </Text>
       </TouchableOpacity>
     </View>
   );
diff --git a/components/video-player/controls/SliderScrubbter.tsx b/components/video-player/controls/SliderScrubbter.tsx
index f0a39a12..ddfd29bb 100644
--- a/components/video-player/controls/SliderScrubbter.tsx
+++ b/components/video-player/controls/SliderScrubbter.tsx
@@ -102,6 +102,7 @@ const SliderScrubber: React.FC<SliderScrubberProps> = ({
                 contentFit='cover'
               />
               <Text
+                maxFontSizeMultiplier={1.2}
                 style={{
                   position: "absolute",
                   bottom: 5,
@@ -126,10 +127,16 @@ const SliderScrubber: React.FC<SliderScrubberProps> = ({
         maximumValue={max}
       />
       <View className='flex flex-row items-center justify-between mt-0.5'>
-        <Text className='text-[12px] text-neutral-400'>
+        <Text
+          maxFontSizeMultiplier={1.2}
+          className='text-[12px] text-neutral-400'
+        >
           {formatTimeString(currentTime, "ms")}
         </Text>
-        <Text className='text-[12px] text-neutral-400'>
+        <Text
+          maxFontSizeMultiplier={1.2}
+          className='text-[12px] text-neutral-400'
+        >
           -{formatTimeString(remainingTime, "ms")}
         </Text>
       </View>
diff --git a/components/video-player/controls/TechnicalInfoOverlay.tsx b/components/video-player/controls/TechnicalInfoOverlay.tsx
index 1498990d..5704b950 100644
--- a/components/video-player/controls/TechnicalInfoOverlay.tsx
+++ b/components/video-player/controls/TechnicalInfoOverlay.tsx
@@ -195,6 +195,7 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
         <View style={styles.infoBox}>
           {playMethod && (
             <Text
+              maxFontSizeMultiplier={1.2}
               style={[
                 styles.infoText,
                 { color: getPlayMethodColor(playMethod) },
@@ -204,28 +205,31 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
             </Text>
           )}
           {transcodeReasons && transcodeReasons.length > 0 && (
-            <Text style={[styles.infoText, styles.reasonText]}>
+            <Text
+              maxFontSizeMultiplier={1.2}
+              style={[styles.infoText, styles.reasonText]}
+            >
               {transcodeReasons.map(formatTranscodeReason).join(", ")}
             </Text>
           )}
           {info?.videoWidth && info?.videoHeight && (
-            <Text style={styles.infoText}>
+            <Text maxFontSizeMultiplier={1.2} style={styles.infoText}>
               {info.videoWidth}x{info.videoHeight}
             </Text>
           )}
           {info?.videoCodec && (
-            <Text style={styles.infoText}>
+            <Text maxFontSizeMultiplier={1.2} style={styles.infoText}>
               Video: {formatCodec(info.videoCodec)}
               {info.fps ? ` @ ${formatFps(info.fps)} fps` : ""}
             </Text>
           )}
           {info?.audioCodec && (
-            <Text style={styles.infoText}>
+            <Text maxFontSizeMultiplier={1.2} style={styles.infoText}>
               Audio: {formatCodec(info.audioCodec)}
             </Text>
           )}
           {(info?.videoBitrate || info?.audioBitrate) && (
-            <Text style={styles.infoText}>
+            <Text maxFontSizeMultiplier={1.2} style={styles.infoText}>
               Bitrate:{" "}
               {info.videoBitrate
                 ? formatBitrate(info.videoBitrate)
@@ -235,17 +239,22 @@ export const TechnicalInfoOverlay: FC<TechnicalInfoOverlayProps> = memo(
             </Text>
           )}
           {info?.cacheSeconds !== undefined && (
-            <Text style={styles.infoText}>
+            <Text maxFontSizeMultiplier={1.2} style={styles.infoText}>
               Buffer: {info.cacheSeconds.toFixed(1)}s
             </Text>
           )}
           {info?.droppedFrames !== undefined && info.droppedFrames > 0 && (
-            <Text style={[styles.infoText, styles.warningText]}>
+            <Text
+              maxFontSizeMultiplier={1.2}
+              style={[styles.infoText, styles.warningText]}
+            >
               Dropped: {info.droppedFrames} frames
             </Text>
           )}
           {!info && !playMethod && (
-            <Text style={styles.infoText}>Loading...</Text>
+            <Text maxFontSizeMultiplier={1.2} style={styles.infoText}>
+              Loading...
+            </Text>
           )}
         </View>
       </Animated.View>