From f33c777e0c1be34cc84dcf227bdae44ca82af640 Mon Sep 17 00:00:00 2001 From: Fredrik Burmester Date: Mon, 29 Jun 2026 09:12:19 +0200 Subject: [PATCH] fix(tv): align search page edges to the app-wide horizontal padding MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The TV search/discover page had three competing left-edge paddings: the Library/Discover badges used HORIZONTAL_PADDING (60), the Jellyseerr discover sections used SCALE_PADDING (20), while the rest of the app (home rows, library sections, loading skeleton) uses sizes.padding.horizontal. This left the filter badges visibly misaligned with the content grid below them. Unify the badges and the Jellyseerr discover/search sections onto sizes.padding.horizontal so the filter row, section headers, and posters share one edge — consistent with the home and library screens. Claude-Session: https://claude.ai/code/session_016Hhu5DruGLPhdP4LAoy1Xd --- .../jellyseerr/discover/TVDiscoverSlide.tsx | 6 ++++-- components/search/TVJellyseerrSearchResults.tsx | 16 ++++++++++------ components/search/TVSearchPage.tsx | 6 +++--- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/components/jellyseerr/discover/TVDiscoverSlide.tsx b/components/jellyseerr/discover/TVDiscoverSlide.tsx index 5f98fcf5..65f7e883 100644 --- a/components/jellyseerr/discover/TVDiscoverSlide.tsx +++ b/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 = ({ isFirstSlide = false, }) => { const typography = useScaledTVTypography(); + const sizes = useScaledTVSizes(); const { t } = useTranslation(); const { jellyseerrApi, isJellyseerrMovieOrTvResult } = useJellyseerr(); @@ -238,7 +240,7 @@ export const TVDiscoverSlide: React.FC = ({ fontWeight: "bold", color: "#FFFFFF", marginBottom: 16, - marginLeft: SCALE_PADDING, + marginLeft: sizes.padding.horizontal, }} > {slideTitle} @@ -249,7 +251,7 @@ export const TVDiscoverSlide: React.FC = ({ keyExtractor={(item) => item.id.toString()} showsHorizontalScrollIndicator={false} contentContainerStyle={{ - paddingHorizontal: SCALE_PADDING, + paddingHorizontal: sizes.padding.horizontal, paddingVertical: SCALE_PADDING, gap: 20, }} diff --git a/components/search/TVJellyseerrSearchResults.tsx b/components/search/TVJellyseerrSearchResults.tsx index 699c5040..f811479b 100644 --- a/components/search/TVJellyseerrSearchResults.tsx +++ b/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 = ({ onItemPress, }) => { const typography = useScaledTVTypography(); + const sizes = useScaledTVSizes(); if (!items || items.length === 0) return null; return ( @@ -243,7 +245,7 @@ const TVJellyseerrMovieSection: React.FC = ({ fontWeight: "bold", color: "#FFFFFF", marginBottom: 16, - marginLeft: SCALE_PADDING, + marginLeft: sizes.padding.horizontal, }} > {title} @@ -254,7 +256,7 @@ const TVJellyseerrMovieSection: React.FC = ({ 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 = ({ onItemPress, }) => { const typography = useScaledTVTypography(); + const sizes = useScaledTVSizes(); if (!items || items.length === 0) return null; return ( @@ -295,7 +298,7 @@ const TVJellyseerrTvSection: React.FC = ({ fontWeight: "bold", color: "#FFFFFF", marginBottom: 16, - marginLeft: SCALE_PADDING, + marginLeft: sizes.padding.horizontal, }} > {title} @@ -306,7 +309,7 @@ const TVJellyseerrTvSection: React.FC = ({ 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 = ({ onItemPress, }) => { const typography = useScaledTVTypography(); + const sizes = useScaledTVSizes(); if (!items || items.length === 0) return null; return ( @@ -347,7 +351,7 @@ const TVJellyseerrPersonSection: React.FC = ({ fontWeight: "bold", color: "#FFFFFF", marginBottom: 16, - marginLeft: SCALE_PADDING, + marginLeft: sizes.padding.horizontal, }} > {title} @@ -358,7 +362,7 @@ const TVJellyseerrPersonSection: React.FC = ({ keyExtractor={(item) => item.id.toString()} showsHorizontalScrollIndicator={false} contentContainerStyle={{ - paddingHorizontal: SCALE_PADDING, + paddingHorizontal: sizes.padding.horizontal, paddingVertical: SCALE_PADDING, gap: 20, }} diff --git a/components/search/TVSearchPage.tsx b/components/search/TVSearchPage.tsx index 24e6120d..264f5c28 100644 --- a/components/search/TVSearchPage.tsx +++ b/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 = ({ 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 = ({ ) : ( @@ -285,7 +285,7 @@ export const TVSearchPage: React.FC = ({ > {/* Search Type Tab Badges */} {showDiscover && ( - +