From 3438e78cab95439ed38940a5e0d7c006026407c1 Mon Sep 17 00:00:00 2001
From: Fredrik Burmester <fredrik.burmester@gmail.com>
Date: Sun, 1 Feb 2026 22:04:53 +0100
Subject: [PATCH] feat(tv): implement edge-to-edge horizontal sections for
 apple tv-like experience

---
 components/home/TVHeroCarousel.tsx | 28 +++++++++++++++++++++-------
 1 file changed, 21 insertions(+), 7 deletions(-)

diff --git a/components/home/TVHeroCarousel.tsx b/components/home/TVHeroCarousel.tsx
index 8118245b..0d5b6bac 100644
--- a/components/home/TVHeroCarousel.tsx
+++ b/components/home/TVHeroCarousel.tsx
@@ -206,7 +206,7 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
   const typography = useScaledTVTypography();
   const sizes = useScaledTVSizes();
   const api = useAtomValue(apiAtom);
-  const insets = useSafeAreaInsets();
+  const _insets = useSafeAreaInsets();
   const router = useRouter();
 
   // Active item for featured display (debounced)
@@ -465,13 +465,14 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
         />
       </View>
 
-      {/* Content overlay */}
+      {/* Content overlay - text elements with padding */}
       <View
         style={{
           position: "absolute",
-          left: insets.left + sizes.padding.horizontal,
-          right: insets.right + sizes.padding.horizontal,
-          bottom: 40,
+          left: sizes.padding.horizontal,
+          right: sizes.padding.horizontal,
+          bottom:
+            40 + sizes.posters.episode * (9 / 16) + sizes.gaps.small * 2 + 20,
         }}
       >
         {/* Logo or Title */}
@@ -536,7 +537,6 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
             flexDirection: "row",
             alignItems: "center",
             gap: 16,
-            marginBottom: 20,
           }}
         >
           {year && (
@@ -616,14 +616,28 @@ export const TVHeroCarousel: React.FC<TVHeroCarouselProps> = ({
             </View>
           )}
         </View>
+      </View>
 
-        {/* Thumbnail carousel */}
+      {/* Thumbnail carousel - edge-to-edge */}
+      <View
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          bottom: 40,
+        }}
+      >
         <FlatList
           horizontal
           data={heroItems}
           keyExtractor={keyExtractor}
           showsHorizontalScrollIndicator={false}
           style={{ overflow: "visible" }}
+          contentInset={{
+            left: sizes.padding.horizontal,
+            right: sizes.padding.horizontal,
+          }}
+          contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
           contentContainerStyle={{ paddingVertical: sizes.gaps.small }}
           renderItem={renderHeroCard}
           removeClippedSubviews={false}