diff --git a/app/(auth)/tv-option-modal.tsx b/app/(auth)/tv-option-modal.tsx index 180228e3..7a7ead18 100644 --- a/app/(auth)/tv-option-modal.tsx +++ b/app/(auth)/tv-option-modal.tsx @@ -11,7 +11,10 @@ import { } from "react-native"; import { Text } from "@/components/common/Text"; import { TVOptionCard } from "@/components/tv"; -import { useScaledTVTypography } from "@/constants/TVTypography"; +import { + useScaledTVTypography, + useTVRelativeScale, +} from "@/constants/TVTypography"; import useRouter from "@/hooks/useAppRouter"; import { useTVBackPress } from "@/hooks/useTVBackPress"; import { tvOptionModalAtom } from "@/utils/atoms/tvOptionModal"; @@ -22,6 +25,7 @@ export default function TVOptionModal() { const router = useRouter(); const modalState = useAtomValue(tvOptionModalAtom); const typography = useScaledTVTypography(); + const relativeScale = useTVRelativeScale(); const [isReady, setIsReady] = useState(false); const firstCardRef = useRef(null); @@ -97,8 +101,15 @@ export default function TVOptionModal() { } const { title, options } = modalState; - const scaledCardWidth = scaleSize(160); - const scaledCardHeight = scaleSize(75); + // Honor the caller-provided card size (e.g. wider cards for long root-folder + // paths) and grow it in step with the user's text-scale setting so larger + // fonts don't get clipped. + const scaledCardWidth = scaleSize( + (modalState.cardWidth ?? 160) * relativeScale, + ); + const scaledCardHeight = scaleSize( + (modalState.cardHeight ?? 75) * relativeScale, + ); return ( diff --git a/constants/TVTypography.ts b/constants/TVTypography.ts index cbac9b69..622ab657 100644 --- a/constants/TVTypography.ts +++ b/constants/TVTypography.ts @@ -55,6 +55,20 @@ export type ScaledTVTypography = { callout: number; }; +/** + * Returns the user's text-scale factor relative to the Default scale (1.0 at + * Default, >1 for Large/ExtraLarge, <1 for Small). Use it to scale containers + * (e.g. option-card width/height) in step with the scaled font so larger text + * settings don't overflow fixed boxes. + */ +export const useTVRelativeScale = (): number => { + const { settings } = useSettings(); + const scale = + scaleMultipliers[settings.tvTypographyScale] ?? + scaleMultipliers[TVTypographyScale.Default]; + return scale / scaleMultipliers[TVTypographyScale.Default]; +}; + /** * Hook that returns scaled TV typography values based on user settings. * Use this instead of the static TVTypography constant for dynamic scaling.