refactor(tv): have section pages fill width

This commit is contained in:
Fredrik Burmester
2026-02-01 21:10:25 +01:00
parent c35e97f388
commit 67bca1f989
7 changed files with 32 additions and 16 deletions

View File

@@ -178,8 +178,6 @@ export const Favorites = () => {
contentContainerStyle={{
paddingTop: insets.top + TOP_PADDING,
paddingBottom: insets.bottom + 60,
paddingLeft: insets.left + HORIZONTAL_PADDING,
paddingRight: insets.right + HORIZONTAL_PADDING,
}}
>
<View style={{ gap: SECTION_GAP }}>

View File

@@ -737,7 +737,6 @@ export const Home = () => {
<View
style={{
gap: SECTION_GAP,
paddingHorizontal: insets.left + HORIZONTAL_PADDING,
paddingTop: showHero ? SECTION_GAP : 0,
}}
>

View File

@@ -251,7 +251,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
fontWeight: "700",
color: "#FFFFFF",
marginBottom: 20,
marginLeft: SCALE_PADDING,
marginLeft: sizes.padding.horizontal,
letterSpacing: 0.5,
}}
>
@@ -263,7 +263,7 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
style={{
color: "#737373",
fontSize: typography.callout,
marginLeft: SCALE_PADDING,
marginLeft: sizes.padding.horizontal,
}}
>
{t("home.no_items")}
@@ -329,9 +329,13 @@ export const InfiniteScrollingCollectionList: React.FC<Props> = ({
removeClippedSubviews={false}
maintainVisibleContentPosition={{ minIndexForVisible: 0 }}
style={{ overflow: "visible" }}
contentInset={{
left: sizes.padding.horizontal,
right: sizes.padding.horizontal,
}}
contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
contentContainerStyle={{
paddingVertical: SCALE_PADDING,
paddingHorizontal: SCALE_PADDING,
}}
ListFooterComponent={
<View

View File

@@ -145,7 +145,7 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({
fontWeight: "700",
color: "#FFFFFF",
marginBottom: 20,
marginLeft: SCALE_PADDING,
marginLeft: sizes.padding.horizontal,
letterSpacing: 0.5,
}}
>
@@ -188,9 +188,13 @@ const WatchlistSection: React.FC<WatchlistSectionProps> = ({
removeClippedSubviews={false}
getItemLayout={getItemLayout}
style={{ overflow: "visible" }}
contentInset={{
left: sizes.padding.horizontal,
right: sizes.padding.horizontal,
}}
contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
contentContainerStyle={{
paddingVertical: SCALE_PADDING,
paddingHorizontal: SCALE_PADDING,
}}
/>
)}

View File

@@ -197,7 +197,7 @@ export const StreamystatsRecommendations: React.FC<Props> = ({
fontWeight: "700",
color: "#FFFFFF",
marginBottom: 20,
marginLeft: sizes.padding.scale,
marginLeft: sizes.padding.horizontal,
letterSpacing: 0.5,
}}
>
@@ -240,9 +240,13 @@ export const StreamystatsRecommendations: React.FC<Props> = ({
removeClippedSubviews={false}
getItemLayout={getItemLayout}
style={{ overflow: "visible" }}
contentInset={{
left: sizes.padding.horizontal,
right: sizes.padding.horizontal,
}}
contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
contentContainerStyle={{
paddingVertical: sizes.padding.scale,
paddingHorizontal: sizes.padding.scale,
}}
/>
)}

View File

@@ -222,12 +222,15 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
contentContainerStyle={{
paddingTop: insets.top + TOP_PADDING,
paddingBottom: insets.bottom + 60,
paddingLeft: insets.left + HORIZONTAL_PADDING,
paddingRight: insets.right + HORIZONTAL_PADDING,
}}
>
{/* Search Input */}
<View style={{ marginBottom: 24, marginHorizontal: SCALE_PADDING + 200 }}>
<View
style={{
marginBottom: 24,
marginHorizontal: HORIZONTAL_PADDING + 200,
}}
>
<Input
placeholder={t("search.search")}
value={search}
@@ -247,7 +250,7 @@ export const TVSearchPage: React.FC<TVSearchPageProps> = ({
{/* Search Type Tab Badges */}
{showDiscover && (
<View style={{ marginHorizontal: SCALE_PADDING }}>
<View style={{ marginHorizontal: HORIZONTAL_PADDING }}>
<TVSearchTabBadges
searchType={searchType}
setSearchType={setSearchType}

View File

@@ -273,7 +273,7 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
fontWeight: "700",
color: "#FFFFFF",
marginBottom: 20,
marginLeft: SCALE_PADDING,
marginLeft: sizes.padding.horizontal,
letterSpacing: 0.5,
}}
>
@@ -293,9 +293,13 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
removeClippedSubviews={false}
getItemLayout={getItemLayout}
style={{ overflow: "visible" }}
contentInset={{
left: sizes.padding.horizontal,
right: sizes.padding.horizontal,
}}
contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
contentContainerStyle={{
paddingVertical: SCALE_PADDING,
paddingHorizontal: SCALE_PADDING,
}}
/>
</View>