fix(tv): scale option-modal cards with text size + honor cardWidth

The TV option modal hardcoded the card size to scaleSize(160)/(75),
ignoring the caller's cardWidth/cardHeight and never growing with the
user's text-scale setting. With "Large" text, long values (e.g. a
root-folder path) overflowed the fixed card and were truncated. Honor
the provided cardWidth/cardHeight and multiply by the text scale
(new useTVRelativeScale) so the card grows in step with the font.

Claude-Session: https://claude.ai/code/session_016Hhu5DruGLPhdP4LAoy1Xd

.claude/learned-facts/use-network-aware-query-client-limitations.md

@@ -6,4 +6,6 @@
 
 ## Detail
 
-The `useNetworkAwareQueryClient` hook uses `Object.create(queryClient)` which breaks QueryClient methods that use JavaScript private fields (like `getQueriesData`, `setQueriesData`, `setQueryData`). Only use it when you ONLY need `invalidateQueries`. For cache manipulation, use standard `useQueryClient` from `@tanstack/react-query`.
+**Updated 2026-06-29**: This limitation no longer applies. The hook was rewritten to use a `Proxy` (not `Object.create`). It overrides only `invalidateQueries` (network-aware) / `forceInvalidateQueries`, and binds every other method to the real `queryClient` target (`value.bind(target)`). So private-field methods like `getQueriesData`, `setQueryData`, and `removeQueries` work correctly through it now — no need to fall back to a separate `useQueryClient`. (Confirmed when adding `queryClient.removeQueries` to `clearAllJellyseerData` in `hooks/useJellyseerr.ts`.)
+
+Historical (pre-2026-06): the hook used `Object.create(queryClient)`, which broke methods relying on JavaScript private fields; back then only `invalidateQueries` was safe.

app/(auth)/(tabs)/(home)/settings.tv.tsx

@@ -1,12 +1,13 @@
 import { SubtitlePlaybackMode } from "@jellyfin/sdk/lib/generated-client";
-import { useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Directory, Paths } from "expo-file-system";
 import { Image } from "expo-image";
 import { useAtom } from "jotai";
-import { useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Alert, ScrollView, View } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { toast } from "sonner-native";
 import { Text } from "@/components/common/Text";
 import { TVPasswordEntryModal } from "@/components/login/TVPasswordEntryModal";
 import { TVPINEntryModal } from "@/components/login/TVPINEntryModal";
@@ -21,6 +22,7 @@ import {
   TVSettingsToggle,
 } from "@/components/tv";
 import { useScaledTVTypography } from "@/constants/TVTypography";
+import { JellyseerrApi, useJellyseerr } from "@/hooks/useJellyseerr";
 import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import { useTVUserSwitchModal } from "@/hooks/useTVUserSwitchModal";
 import { APP_LANGUAGES } from "@/i18n";
@@ -50,7 +52,7 @@ import { clearTopShelfCacheSafely } from "@/utils/topshelf/cache";
 export default function SettingsTV() {
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
-  const { settings, updateSettings } = useSettings();
+  const { settings, updateSettings, pluginSettings } = useSettings();
   const { logout, loginWithSavedCredential, loginWithPassword } = useJellyfin();
   const [user] = useAtom(userAtom);
   const [api] = useAtom(apiAtom);
@@ -59,6 +61,51 @@ export default function SettingsTV() {
   const { showUserSwitchModal } = useTVUserSwitchModal();
   const typography = useScaledTVTypography();
   const queryClient = useQueryClient();
+  const { jellyseerrApi, setJellyseerrUser, clearAllJellyseerData } =
+    useJellyseerr();
+
+  // Jellyseerr connection state
+  const [jellyseerrServerUrl, setJellyseerrServerUrl] = useState(
+    settings.jellyseerrServerUrl || "",
+  );
+  const [jellyseerrPassword, setJellyseerrPassword] = useState("");
+
+  const isJellyseerrLocked =
+    pluginSettings?.jellyseerrServerUrl?.locked === true;
+  const isJellyseerrConnected = !!jellyseerrApi;
+
+  const handleJellyseerrUrlBlur = useCallback(() => {
+    const url = jellyseerrServerUrl.trim();
+    updateSettings({ jellyseerrServerUrl: url || undefined });
+  }, [jellyseerrServerUrl, updateSettings]);
+
+  const jellyseerrLoginMutation = useMutation({
+    mutationFn: async () => {
+      const url = jellyseerrServerUrl.trim();
+      if (!url) throw new Error("Missing server url");
+      if (!user?.Name) throw new Error("Missing user info");
+      const tempApi = new JellyseerrApi(url);
+      const testResult = await tempApi.test();
+      if (!testResult.isValid) throw new Error("Invalid server url");
+      return tempApi.login(user.Name, jellyseerrPassword);
+    },
+    onSuccess: (loggedInUser) => {
+      setJellyseerrUser(loggedInUser);
+      updateSettings({ jellyseerrServerUrl: jellyseerrServerUrl.trim() });
+    },
+    onError: () => {
+      toast.error(t("jellyseerr.failed_to_login"));
+    },
+    onSettled: () => {
+      setJellyseerrPassword("");
+    },
+  });
+
+  const handleDisconnectJellyseerr = useCallback(() => {
+    clearAllJellyseerData();
+    setJellyseerrServerUrl("");
+    setJellyseerrPassword("");
+  }, [clearAllJellyseerData]);
 
   // Local state for OpenSubtitles API key (only commit on blur)
   const [openSubtitlesApiKey, setOpenSubtitlesApiKey] = useState(
@@ -877,6 +924,72 @@ export default function SettingsTV() {
             onToggle={(value) => updateSettings({ tvThemeMusicEnabled: value })}
           />
 
+          {/* seerr Section */}
+          <TVSectionHeader title='seerr' />
+          <Text
+            style={{
+              color: "#9CA3AF",
+              fontSize: typography.callout - 2,
+              marginBottom: 16,
+              marginLeft: 8,
+            }}
+          >
+            {t("home.settings.plugins.jellyseerr.server_url_hint")}
+          </Text>
+          <TVSettingsTextInput
+            label={t("home.settings.plugins.jellyseerr.server_url")}
+            value={jellyseerrServerUrl}
+            placeholder={t(
+              "home.settings.plugins.jellyseerr.server_url_placeholder",
+            )}
+            onChangeText={setJellyseerrServerUrl}
+            onBlur={handleJellyseerrUrlBlur}
+            disabled={isJellyseerrLocked || jellyseerrLoginMutation.isPending}
+          />
+          {!isJellyseerrConnected && !isJellyseerrLocked && (
+            <>
+              <TVSettingsTextInput
+                label={t("home.settings.plugins.jellyseerr.password")}
+                value={jellyseerrPassword}
+                placeholder={t(
+                  "home.settings.plugins.jellyseerr.password_placeholder",
+                  { username: user?.Name },
+                )}
+                onChangeText={setJellyseerrPassword}
+                secureTextEntry
+                disabled={jellyseerrLoginMutation.isPending}
+              />
+              <TVSettingsOptionButton
+                label={
+                  jellyseerrLoginMutation.isPending
+                    ? t("common.connecting")
+                    : t("common.connect")
+                }
+                value=''
+                onPress={() => jellyseerrLoginMutation.mutate()}
+                disabled={jellyseerrLoginMutation.isPending}
+              />
+            </>
+          )}
+          <TVSettingsRow
+            label={
+              isJellyseerrConnected
+                ? t("common.connected")
+                : t("common.not_connected")
+            }
+            value=''
+            showChevron={false}
+          />
+          {isJellyseerrConnected && !isJellyseerrLocked && (
+            <TVSettingsOptionButton
+              label={t(
+                "home.settings.plugins.jellyseerr.reset_jellyseerr_config_button",
+              )}
+              value=''
+              onPress={handleDisconnectJellyseerr}
+            />
+          )}
+
           {/* Storage Section */}
           <TVSectionHeader title={t("home.settings.storage.storage_title")} />
           <TVSettingsOptionButton

app/(auth)/(tabs)/(search)/index.tsx

@@ -7,7 +7,12 @@ import { useAsyncDebouncer } from "@tanstack/react-pacer";
 import { useQuery } from "@tanstack/react-query";
 import axios from "axios";
 import { Image } from "expo-image";
-import { useLocalSearchParams, useNavigation, useSegments } from "expo-router";
+import {
+  useIsFocused,
+  useLocalSearchParams,
+  useNavigation,
+  useSegments,
+} from "expo-router";
 import { useAtom } from "jotai";
 import { orderBy, uniqBy } from "lodash";
 import {
@@ -20,7 +25,13 @@ import {
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { Platform, ScrollView, TouchableOpacity, View } from "react-native";
+import {
+  Alert,
+  Platform,
+  ScrollView,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import ContinueWatchingPoster from "@/components/ContinueWatchingPoster";
 import { Text } from "@/components/common/Text";
@@ -41,7 +52,10 @@ import { SearchItemWrapper } from "@/components/search/SearchItemWrapper";
 import { SearchTabButtons } from "@/components/search/SearchTabButtons";
 import { TVSearchPage } from "@/components/search/TVSearchPage";
 import useRouter from "@/hooks/useAppRouter";
-import { useJellyseerr } from "@/hooks/useJellyseerr";
+import {
+  useJellyseerr,
+  validateJellyseerrSession,
+} from "@/hooks/useJellyseerr";
 import { useTVItemActionModal } from "@/hooks/useTVItemActionModal";
 import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
 import { useSettings } from "@/utils/atoms/settings";
@@ -106,8 +120,40 @@ export default function SearchPage() {
 
   const [api] = useAtom(apiAtom);
 
+  const isFocused = useIsFocused();
   const { settings } = useSettings();
   const { jellyseerrApi } = useJellyseerr();
+
+  // Prompt the user to connect when a Jellyseerr server is configured but no
+  // session exists yet (only once per focus, and only while the tab is focused).
+  const jellyseerrAlertedRef = useRef(false);
+  useEffect(() => {
+    if (!isFocused || !settings?.jellyseerrServerUrl || jellyseerrApi) return;
+    if (jellyseerrAlertedRef.current) return;
+    jellyseerrAlertedRef.current = true;
+    Alert.alert(
+      t("jellyseerr.connect_to_jellyseerr"),
+      t("jellyseerr.connect_in_settings"),
+    );
+  }, [isFocused, settings?.jellyseerrServerUrl, jellyseerrApi, t]);
+
+  // Validate the Jellyseerr session when switching to Discover; warn if expired.
+  useEffect(() => {
+    if (
+      searchType !== "Discover" ||
+      !jellyseerrApi ||
+      !settings?.jellyseerrServerUrl
+    )
+      return;
+    validateJellyseerrSession(settings.jellyseerrServerUrl).then((status) => {
+      if (status.valid) return;
+      Alert.alert(
+        t("jellyseerr.session_expired"),
+        t("jellyseerr.session_expired_connect_again"),
+      );
+    });
+  }, [searchType, jellyseerrApi, settings?.jellyseerrServerUrl, t]);
+
   const [jellyseerrOrderBy, setJellyseerrOrderBy] =
     useState<JellyseerrSearchSort>(
       JellyseerrSearchSort[

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<View>(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 (
     <Animated.View style={[styles.overlay, { opacity: overlayOpacity }]}>

app/(auth)/tv-request-modal.tsx

@@ -15,11 +15,12 @@ import {
 import { Text } from "@/components/common/Text";
 import { TVRequestOptionRow } from "@/components/jellyseerr/tv/TVRequestOptionRow";
 import { TVToggleOptionRow } from "@/components/jellyseerr/tv/TVToggleOptionRow";
-import { TVButton, TVOptionSelector } from "@/components/tv";
+import { TVButton } from "@/components/tv";
 import type { TVOptionItem } from "@/components/tv/TVOptionSelector";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
+import { useTVOptionModal } from "@/hooks/useTVOptionModal";
 import { tvRequestModalAtom } from "@/utils/atoms/tvRequestModal";
 import type {
   QualityProfile,
@@ -35,6 +36,7 @@ export default function TVRequestModalPage() {
   const modalState = useAtomValue(tvRequestModalAtom);
   const { t } = useTranslation();
   const { jellyseerrApi, jellyseerrUser, requestMedia } = useJellyseerr();
+  const { showOptions } = useTVOptionModal();
 
   const [isReady, setIsReady] = useState(false);
   const [requestOverrides, setRequestOverrides] = useState<MediaRequestBody>({
@@ -43,10 +45,6 @@ export default function TVRequestModalPage() {
     userId: jellyseerrUser?.id,
   });
 
-  const [activeSelector, setActiveSelector] = useState<
-    "profile" | "folder" | "user" | null
-  >(null);
-
   const overlayOpacity = useRef(new Animated.Value(0)).current;
   const sheetTranslateY = useRef(new Animated.Value(200)).current;
 
@@ -242,17 +240,14 @@ export default function TVRequestModalPage() {
   // Handlers
   const handleProfileChange = useCallback((profileId: number) => {
     setRequestOverrides((prev) => ({ ...prev, profileId }));
-    setActiveSelector(null);
   }, []);
 
   const handleFolderChange = useCallback((rootFolder: string) => {
     setRequestOverrides((prev) => ({ ...prev, rootFolder }));
-    setActiveSelector(null);
   }, []);
 
   const handleUserChange = useCallback((userId: number) => {
     setRequestOverrides((prev) => ({ ...prev, userId }));
-    setActiveSelector(null);
   }, []);
 
   const handleTagToggle = useCallback(
@@ -353,18 +348,37 @@ export default function TVRequestModalPage() {
                   <TVRequestOptionRow
                     label={t("jellyseerr.quality_profile")}
                     value={selectedProfileName}
-                    onPress={() => setActiveSelector("profile")}
+                    onPress={() =>
+                      showOptions({
+                        title: t("jellyseerr.quality_profile"),
+                        options: qualityProfileOptions,
+                        onSelect: handleProfileChange,
+                      })
+                    }
                     hasTVPreferredFocus
                   />
                   <TVRequestOptionRow
                     label={t("jellyseerr.root_folder")}
                     value={selectedFolderName}
-                    onPress={() => setActiveSelector("folder")}
+                    onPress={() =>
+                      showOptions({
+                        title: t("jellyseerr.root_folder"),
+                        options: rootFolderOptions,
+                        onSelect: handleFolderChange,
+                        cardWidth: 280,
+                      })
+                    }
                   />
                   <TVRequestOptionRow
                     label={t("jellyseerr.request_as")}
                     value={selectedUserName}
-                    onPress={() => setActiveSelector("user")}
+                    onPress={() =>
+                      showOptions({
+                        title: t("jellyseerr.request_as"),
+                        options: userOptions,
+                        onSelect: handleUserChange,
+                      })
+                    }
                   />
 
                   {tagItems.length > 0 && (
@@ -409,33 +423,6 @@ export default function TVRequestModalPage() {
           </TVFocusGuideView>
         </BlurView>
       </Animated.View>
-
-      {/* Sub-selectors */}
-      <TVOptionSelector
-        visible={activeSelector === "profile"}
-        title={t("jellyseerr.quality_profile")}
-        options={qualityProfileOptions}
-        onSelect={handleProfileChange}
-        onClose={() => setActiveSelector(null)}
-        cancelLabel={t("jellyseerr.cancel")}
-      />
-      <TVOptionSelector
-        visible={activeSelector === "folder"}
-        title={t("jellyseerr.root_folder")}
-        options={rootFolderOptions}
-        onSelect={handleFolderChange}
-        onClose={() => setActiveSelector(null)}
-        cancelLabel={t("jellyseerr.cancel")}
-        cardWidth={280}
-      />
-      <TVOptionSelector
-        visible={activeSelector === "user"}
-        title={t("jellyseerr.request_as")}
-        options={userOptions}
-        onSelect={handleUserChange}
-        onClose={() => setActiveSelector(null)}
-        cancelLabel={t("jellyseerr.cancel")}
-      />
     </Animated.View>
   );
 }

app/(auth)/tv-season-select-modal.tsx

@@ -26,6 +26,7 @@ import {
   MediaType,
 } from "@/utils/jellyseerr/server/constants/media";
 import type { MediaRequestBody } from "@/utils/jellyseerr/server/interfaces/api/requestInterfaces";
+import { scaleSize } from "@/utils/scaleSize";
 import { store } from "@/utils/store";
 
 interface TVSeasonToggleCardProps {
@@ -49,6 +50,7 @@ const TVSeasonToggleCard: React.FC<TVSeasonToggleCardProps> = ({
   hasTVPreferredFocus,
 }) => {
   const { t } = useTranslation();
+  const typography = useScaledTVTypography();
   const { focused, handleFocus, handleBlur, animatedStyle } =
     useTVFocusAnimation({ scaleAmount: 1.08 });
 
@@ -119,7 +121,10 @@ const TVSeasonToggleCard: React.FC<TVSeasonToggleCardProps> = ({
           <Text
             style={[
               styles.seasonTitle,
-              { color: focused ? "#000000" : "#FFFFFF" },
+              {
+                fontSize: typography.callout,
+                color: focused ? "#000000" : "#FFFFFF",
+              },
             ]}
             numberOfLines={1}
           >
@@ -132,6 +137,7 @@ const TVSeasonToggleCard: React.FC<TVSeasonToggleCardProps> = ({
               style={[
                 styles.episodeCount,
                 {
+                  fontSize: typography.callout - 4,
                   color: focused ? "rgba(0,0,0,0.6)" : "rgba(255,255,255,0.6)",
                 },
               ]}
@@ -251,14 +257,15 @@ export default function TVSeasonSelectModalPage() {
     };
 
     if (modalState.hasAdvancedRequestPermission) {
-      // Close this modal and open the advanced request modal
-      router.back();
+      // Replace this sheet with the advanced request modal so it takes our
+      // place in the stack instead of stacking on top (which breaks focus).
       showRequestModal({
         requestBody: body,
         title: modalState.title,
         id: modalState.mediaId,
         mediaType: MediaType.TV,
         onRequested: modalState.onRequested,
+        replace: true,
       });
       return;
     }
@@ -401,7 +408,7 @@ const styles = StyleSheet.create({
     gap: 16,
   },
   seasonCard: {
-    width: 160,
+    width: scaleSize(220),
     paddingVertical: 16,
     paddingHorizontal: 16,
     borderRadius: 12,
@@ -415,7 +422,10 @@ const styles = StyleSheet.create({
     marginBottom: 8,
   },
   seasonInfo: {
-    flex: 1,
+    // Note: no `flex: 1` here — the card is an auto-height column, so flex:1
+    // (flexBasis: 0) would collapse this box and hide the text. Let it size to
+    // its content instead.
+    alignSelf: "stretch",
   },
   seasonTitle: {
     fontWeight: "600",
@@ -426,9 +436,7 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "space-between",
   },
-  episodeCount: {
-    fontSize: 14,
-  },
+  episodeCount: {},
   statusBadge: {
     width: 22,
     height: 22,

components/jellyseerr/discover/TVDiscoverSlide.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from "react-i18next";
 import { Animated, FlatList, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
+import { useScaledTVSizes } from "@/constants/TVSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import useRouter from "@/hooks/useAppRouter";
 import {
@@ -166,6 +167,7 @@ export const TVDiscoverSlide: React.FC<TVDiscoverSlideProps> = ({
   isFirstSlide = false,
 }) => {
   const typography = useScaledTVTypography();
+  const sizes = useScaledTVSizes();
   const { t } = useTranslation();
   const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr();
 
@@ -238,7 +240,7 @@ export const TVDiscoverSlide: React.FC<TVDiscoverSlideProps> = ({
           fontWeight: "bold",
           color: "#FFFFFF",
           marginBottom: 16,
-          marginLeft: SCALE_PADDING,
+          marginLeft: sizes.padding.horizontal,
         }}
       >
         {slideTitle}
@@ -249,7 +251,7 @@ export const TVDiscoverSlide: React.FC<TVDiscoverSlideProps> = ({
         keyExtractor={(item) => item.id.toString()}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={{
-          paddingHorizontal: SCALE_PADDING,
+          paddingHorizontal: sizes.padding.horizontal,
           paddingVertical: SCALE_PADDING,
           gap: 20,
         }}

components/search/TVJellyseerrSearchResults.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Animated, FlatList, Pressable, View } from "react-native";
 import { Text } from "@/components/common/Text";
 import { useTVFocusAnimation } from "@/components/tv/hooks/useTVFocusAnimation";
+import { useScaledTVSizes } from "@/constants/TVSizes";
 import { useScaledTVTypography } from "@/constants/TVTypography";
 import { useJellyseerr } from "@/hooks/useJellyseerr";
 import { MediaStatus } from "@/utils/jellyseerr/server/constants/media";
@@ -233,6 +234,7 @@ const TVJellyseerrMovieSection: React.FC<TVJellyseerrMovieSectionProps> = ({
   onItemPress,
 }) => {
   const typography = useScaledTVTypography();
+  const sizes = useScaledTVSizes();
   if (!items || items.length === 0) return null;
 
   return (
@@ -243,7 +245,7 @@ const TVJellyseerrMovieSection: React.FC<TVJellyseerrMovieSectionProps> = ({
           fontWeight: "bold",
           color: "#FFFFFF",
           marginBottom: 16,
-          marginLeft: SCALE_PADDING,
+          marginLeft: sizes.padding.horizontal,
         }}
       >
         {title}
@@ -254,7 +256,7 @@ const TVJellyseerrMovieSection: React.FC<TVJellyseerrMovieSectionProps> = ({
         keyExtractor={(item) => item.id.toString()}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={{
-          paddingHorizontal: SCALE_PADDING,
+          paddingHorizontal: sizes.padding.horizontal,
           paddingVertical: SCALE_PADDING,
           gap: 20,
         }}
@@ -285,6 +287,7 @@ const TVJellyseerrTvSection: React.FC<TVJellyseerrTvSectionProps> = ({
   onItemPress,
 }) => {
   const typography = useScaledTVTypography();
+  const sizes = useScaledTVSizes();
   if (!items || items.length === 0) return null;
 
   return (
@@ -295,7 +298,7 @@ const TVJellyseerrTvSection: React.FC<TVJellyseerrTvSectionProps> = ({
           fontWeight: "bold",
           color: "#FFFFFF",
           marginBottom: 16,
-          marginLeft: SCALE_PADDING,
+          marginLeft: sizes.padding.horizontal,
         }}
       >
         {title}
@@ -306,7 +309,7 @@ const TVJellyseerrTvSection: React.FC<TVJellyseerrTvSectionProps> = ({
         keyExtractor={(item) => item.id.toString()}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={{
-          paddingHorizontal: SCALE_PADDING,
+          paddingHorizontal: sizes.padding.horizontal,
           paddingVertical: SCALE_PADDING,
           gap: 20,
         }}
@@ -337,6 +340,7 @@ const TVJellyseerrPersonSection: React.FC<TVJellyseerrPersonSectionProps> = ({
   onItemPress,
 }) => {
   const typography = useScaledTVTypography();
+  const sizes = useScaledTVSizes();
   if (!items || items.length === 0) return null;
 
   return (
@@ -347,7 +351,7 @@ const TVJellyseerrPersonSection: React.FC<TVJellyseerrPersonSectionProps> = ({
           fontWeight: "bold",
           color: "#FFFFFF",
           marginBottom: 16,
-          marginLeft: SCALE_PADDING,
+          marginLeft: sizes.padding.horizontal,
         }}
       >
         {title}
@@ -358,7 +362,7 @@ const TVJellyseerrPersonSection: React.FC<TVJellyseerrPersonSectionProps> = ({
         keyExtractor={(item) => item.id.toString()}
         showsHorizontalScrollIndicator={false}
         contentContainerStyle={{
-          paddingHorizontal: SCALE_PADDING,
+          paddingHorizontal: sizes.padding.horizontal,
           paddingVertical: SCALE_PADDING,
           gap: 20,
         }}

components/search/TVSearchPage.tsx

@@ -22,7 +22,6 @@ import { TVJellyseerrSearchResults } from "./TVJellyseerrSearchResults";
 import { TVSearchSection } from "./TVSearchSection";
 import { TVSearchTabBadges } from "./TVSearchTabBadges";
 
-const HORIZONTAL_PADDING = 60;
 const TOP_PADDING = 100;
 // Height of the native search bar itself. The tvOS grid keyboard presents as
 // its own overlay when the field is focused, so we only reserve the bar height
@@ -163,6 +162,7 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
   discoverSliders,
 }) => {
   const typography = useScaledTVTypography();
+  const sizes = useScaledTVSizes();
   const { t } = useTranslation();
   const insets = useSafeAreaInsets();
   const [api] = useAtom(apiAtom);
@@ -251,7 +251,7 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
         ) : (
           <View
             style={{
-              marginHorizontal: HORIZONTAL_PADDING,
+              marginHorizontal: sizes.padding.horizontal,
               marginBottom: 24,
             }}
           >
@@ -280,12 +280,15 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
         showsVerticalScrollIndicator={false}
         keyboardDismissMode='on-drag'
         contentContainerStyle={{
+          // Top padding so the focus-scale/shadow on the first row (filter
+          // badges) isn't clipped against the ScrollView's top edge.
+          paddingTop: 16,
           paddingBottom: insets.bottom + 60,
         }}
       >
         {/* Search Type Tab Badges */}
         {showDiscover && (
-          <View style={{ marginHorizontal: HORIZONTAL_PADDING }}>
+          <View style={{ marginHorizontal: sizes.padding.horizontal }}>
             <TVSearchTabBadges
               searchType={searchType}
               setSearchType={setSearchType}

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.

hooks/useJellyseerr.ts

@@ -70,6 +70,35 @@ export const clearJellyseerrStorageData = () => {
   storage.remove(JELLYSEERR_COOKIES);
 };
 
+export type JellyseerrSessionStatus =
+  | { valid: true }
+  | { valid: false; reason: "no_session" | "expired" };
+
+/**
+ * Checks whether the persisted Jellyseerr session (user + cookies) is still
+ * valid by hitting the server status endpoint. Clears local session data if the
+ * request fails (expired/revoked cookie).
+ */
+export async function validateJellyseerrSession(
+  serverUrl: string,
+): Promise<JellyseerrSessionStatus> {
+  const user = storage.get<JellyseerrUser>(JELLYSEERR_USER);
+  const cookies = storage.get<string[]>(JELLYSEERR_COOKIES);
+
+  if (!user || !cookies) {
+    return { valid: false, reason: "no_session" };
+  }
+
+  try {
+    const api = new JellyseerrApi(serverUrl);
+    await api.axios.get(Endpoints.API_V1 + Endpoints.STATUS);
+    return { valid: true };
+  } catch {
+    clearJellyseerrStorageData();
+    return { valid: false, reason: "expired" };
+  }
+}
+
 export enum Endpoints {
   STATUS = "/status",
   API_V1 = "/api/v1",
@@ -450,7 +479,8 @@ export const useJellyseerr = () => {
     clearJellyseerrStorageData();
     setJellyseerrUser(undefined);
     updateSettings({ jellyseerrServerUrl: undefined });
-  }, []);
+    queryClient.removeQueries({ queryKey: ["search", "jellyseerr"] });
+  }, [queryClient]);
 
   const requestMedia = useCallback(
     (title: string, request: MediaRequestBody, onSuccess?: () => void) => {

hooks/useTVRequestModal.ts

@@ -11,6 +11,12 @@ interface ShowRequestModalParams {
   id: number;
   mediaType: MediaType;
   onRequested: () => void;
+  /**
+   * Replace the current route instead of pushing. Use when opening the request
+   * modal from another modal (e.g. the season selector) so the new sheet takes
+   * its place rather than stacking on top of it (which breaks TV focus).
+   */
+  replace?: boolean;
 }
 
 export const useTVRequestModal = () => {
@@ -25,7 +31,11 @@ export const useTVRequestModal = () => {
         mediaType: params.mediaType,
         onRequested: params.onRequested,
       });
-      router.push("/(auth)/tv-request-modal");
+      if (params.replace) {
+        router.replace("/(auth)/tv-request-modal");
+      } else {
+        router.push("/(auth)/tv-request-modal");
+      }
     },
     [router],
   );

translations/en.json

@@ -505,7 +505,11 @@
     "episodes": "Episodes",
     "movies": "Movies",
     "loading": "Loading…",
-    "seeAll": "See all"
+    "seeAll": "See all",
+    "connect": "Connect",
+    "connecting": "Connecting…",
+    "connected": "Connected",
+    "not_connected": "Not connected"
   },
   "search": {
     "search": "Search...",
@@ -732,6 +736,10 @@
     "request_button": "Request",
     "are_you_sure_you_want_to_request_all_seasons": "Are you sure you want to request all seasons?",
     "failed_to_login": "Failed to log in",
+    "connect_to_jellyseerr": "Connect to Jellyseerr",
+    "connect_in_settings": "Jellyseerr is available. Connect in Settings to enable request features.",
+    "session_expired": "Session expired",
+    "session_expired_connect_again": "Your Jellyseerr session has expired. Please reconnect in Settings.",
     "cast": "Cast",
     "details": "Details",
     "status": "Status",

translations/sv.json

@@ -505,7 +505,11 @@
     "episodes": "Episodes",
     "movies": "Movies",
     "loading": "Loading…",
-    "seeAll": "See all"
+    "seeAll": "See all",
+    "connect": "Anslut",
+    "connecting": "Ansluter…",
+    "connected": "Ansluten",
+    "not_connected": "Inte ansluten"
   },
   "search": {
     "search": "Sök...",
@@ -732,6 +736,10 @@
     "request_button": "Önska",
     "are_you_sure_you_want_to_request_all_seasons": "Är du säker på att du vill begära alla säsonger?",
     "failed_to_login": "Inloggningen Misslyckades",
+    "connect_to_jellyseerr": "Anslut till Jellyseerr",
+    "connect_in_settings": "Jellyseerr är tillgängligt. Anslut i Inställningar för att aktivera förfrågningsfunktioner.",
+    "session_expired": "Sessionen har gått ut",
+    "session_expired_connect_again": "Din Jellyseerr-session har gått ut. Anslut igen i Inställningar.",
     "cast": "Roller",
     "details": "Detaljer",
     "status": "Status",

utils/jellyfin/subtitleUtils.ts

@@ -44,22 +44,9 @@ export const isSubtitleInMpv = (
 /**
  * Calculate the MPV track ID for a given Jellyfin subtitle index.
  *
- * MPV track IDs are 1-based, but MPV's track list is NOT in MediaStreams order:
- *   1. Embedded/HLS subs are enumerated from the container (or HLS playlist)
- *      first, in MediaStreams order.
- *   2. External subs are appended via `sub-add` AFTER the file loads, in the
- *      order they are passed to MPV (here, also MediaStreams order — see
- *      direct-player.tsx where the externalSubtitles array is built by
- *      filtering MediaStreams).
- *
- * Iterating in pure MediaStreams order produces the wrong MPV ID whenever an
- * External sub is listed before an Embed sub in MediaStreams (common when
- * Jellyfin prepends a converted SRT/VTT ahead of an original PGS/ASS track),
- * causing e.g. English to select Spanish. We therefore count in two phases
- * that mirror MPV's actual ordering.
- *
- * Image-based subs (PGS/VOBSUB) during transcoding are burned into the video
- * and absent from MPV's track list; they are skipped in both phases.
+ * MPV track IDs are 1-based and only count subtitles that are actually in MPV.
+ * We iterate through all subtitles, counting only those in MPV, until we find
+ * the one matching the Jellyfin index.
  *
  * @param mediaSource - The media source containing subtitle streams
  * @param jellyfinSubtitleIndex - The Jellyfin server-side subtitle index (-1 = disabled)
@@ -87,30 +74,14 @@ export const getMpvSubtitleId = (
     return undefined;
   }
 
-  const isExternal = (sub: MediaStream) =>
-    sub.DeliveryMethod === SubtitleDeliveryMethod.External;
-
+  // Count MPV track position (1-based)
   let mpvIndex = 0;
-
-  // Phase 1: embedded / HLS subs — these occupy MPV track IDs first because
-  // they come from the container or HLS playlist.
   for (const sub of allSubs) {
-    if (isExternal(sub)) continue;
-    if (!isSubtitleInMpv(sub, isTranscoding)) continue;
-    mpvIndex++;
-    if (sub.Index === jellyfinSubtitleIndex) {
-      return mpvIndex;
-    }
-  }
-
-  // Phase 2: external subs — appended via `sub-add` after the file loads,
-  // so they come last in MPV's track list.
-  for (const sub of allSubs) {
-    if (!isExternal(sub)) continue;
-    if (!isSubtitleInMpv(sub, isTranscoding)) continue;
-    mpvIndex++;
-    if (sub.Index === jellyfinSubtitleIndex) {
-      return mpvIndex;
+    if (isSubtitleInMpv(sub, isTranscoding)) {
+      mpvIndex++;
+      if (sub.Index === jellyfinSubtitleIndex) {
+        return mpvIndex;
+      }
     }
   }