From c93132177c0305ce146e640342cf47aa56de9174 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sat, 30 May 2026 13:29:56 +0200
Subject: [PATCH] fix(tv): scale search input font and box with
 tvTypographyScale setting

The TV search input hardcoded fontSize and box dimensions, so it ignored
the TV display size setting. Drive font, height, padding, and icon from
the scaled `body` typography token so the whole component scales.
---
 components/common/Input.tsx        | 26 ++++++++++++++++++++------
 components/series/TVSeriesPage.tsx |  4 ++--
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/components/common/Input.tsx b/components/common/Input.tsx
index fa3a29cca..7770f556c 100644
--- a/components/common/Input.tsx
+++ b/components/common/Input.tsx
@@ -10,6 +10,7 @@ import {
   type TextInputProps,
   View,
 } from "react-native";
+import { useScaledTVTypography } from "@/constants/TVTypography";
 
 interface InputProps extends TextInputProps {
   extraClassName?: string;
@@ -20,6 +21,9 @@ export function Input(props: InputProps) {
   const inputRef = useRef<TextInput>(null);
   const [isFocused, setIsFocused] = useState(false);
   const scale = useRef(new Animated.Value(1)).current;
+  // TV-only: scales the input font with the tvTypographyScale setting.
+  // Not consumed by the mobile branch below.
+  const tvTypography = useScaledTVTypography();
 
   const animateFocus = (focused: boolean) => {
     Animated.timing(scale, {
@@ -41,8 +45,18 @@ export function Input(props: InputProps) {
   };
 
   if (Platform.isTV) {
+    // Scale the whole input (box height, padding, icon) proportionally with the
+    // font so the component grows/shrinks with the tvTypographyScale setting.
+    // Uses the `body` token (primary reading size); it resolves to 28 at Default.
+    const fontSize = tvTypography.body;
+    const factor = fontSize / 28;
+    const height = Math.round(56 * factor);
+    const paddingLeft = Math.round(24 * factor);
+    const iconSize = Math.round(26 * factor);
+    const iconMarginRight = Math.round(14 * factor);
+
     const containerStyle = {
-      height: 48,
+      height,
       borderRadius: 50,
       borderWidth: isFocused ? 1.5 : 1,
       borderColor: isFocused
@@ -51,16 +65,16 @@ export function Input(props: InputProps) {
       overflow: "hidden" as const,
       flexDirection: "row" as const,
       alignItems: "center" as const,
-      paddingLeft: 16,
+      paddingLeft,
     };
 
     const inputElement = (
       <>
         <Ionicons
           name='search'
-          size={20}
+          size={iconSize}
           color={isFocused ? "#999" : "#666"}
-          style={{ marginRight: 12 }}
+          style={{ marginRight: iconMarginRight }}
         />
         <TextInput
           ref={inputRef}
@@ -69,8 +83,8 @@ export function Input(props: InputProps) {
           style={[
             {
               flex: 1,
-              height: 48,
-              fontSize: 18,
+              height,
+              fontSize,
               fontWeight: "400",
               color: "#FFFFFF",
               backgroundColor: "transparent",
diff --git a/components/series/TVSeriesPage.tsx b/components/series/TVSeriesPage.tsx
index 3d904e952..26f4447f0 100644
--- a/components/series/TVSeriesPage.tsx
+++ b/components/series/TVSeriesPage.tsx
@@ -193,7 +193,7 @@ const TVSeasonButton: React.FC<{
         >
           <Text
             style={{
-              fontSize: typography.body,
+              fontSize: typography.callout,
               color: focused ? "#000" : "#FFFFFF",
               fontWeight: "bold",
             }}
@@ -538,7 +538,7 @@ export const TVSeriesPage: React.FC<TVSeriesPageProps> = ({
                 />
                 <Text
                   style={{
-                    fontSize: typography.body,
+                    fontSize: typography.callout,
                     fontWeight: "bold",
                     color: "#000000",
                   }}