Align tablet landscape feature with main: move constants to theme and remove unused properties

src/app/(app)/(tabs)/_layout.tsx

@@ -1,6 +1,6 @@
 import { Tabs } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
-import theme, { Box } from '@/theme/theme';
+import theme from '@/theme/theme';
 import { useBreakpoint } from '@/hooks/useBreakpoint';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout';
@@ -28,9 +28,9 @@ export default function TabsLayout() {
                 backgroundColor: theme.colors.cardBackground,
                 borderTopColor: theme.colors.cardBorder,
                 borderTopWidth: 1,
-                paddingBottom: compactTabs ? 2 : bottom,
-                paddingTop: compactTabs ? 4 : 10,
-                height: compactTabs ? 46 : 65 + bottom,
+                paddingBottom: compactTabs ? 0 : bottom,
+                paddingTop: compactTabs ? 4 : theme.sizes.tabBarPaddingTop,
+                height: compactTabs ? 46 : theme.sizes.tabBarHeight + bottom,
               }
             : {
                 display: 'none', // Hide tabs on tablet/TV

src/components/layout/ResponsiveLayout.tsx

@@ -4,6 +4,8 @@ import { useBreakpoint } from '@/hooks/useBreakpoint';
 import { TVSidebar } from './TVSidebar';
 import { useTVBackButton } from '@/hooks/useTVBackButton';
 import { Platform, TVFocusGuideView, useWindowDimensions } from 'react-native';
+import { useTheme } from '@shopify/restyle';
+import type { Theme } from '@/theme/theme';
 
 interface ResponsiveLayoutProps {
   children: ReactNode;
@@ -12,6 +14,7 @@ interface ResponsiveLayoutProps {
 
 export const ResponsiveLayout: FC<ResponsiveLayoutProps> = ({ children, maxWidth }) => {
   const breakpoint = useBreakpoint();
+  const theme = useTheme<Theme>();
   const { width, height } = useWindowDimensions();
   const isLandscape = width > height;
 
@@ -27,7 +30,7 @@ export const ResponsiveLayout: FC<ResponsiveLayoutProps> = ({ children, maxWidth
       : breakpoint === 'tv'
         ? width * 0.5
         : breakpoint === 'tablet' && isLandscape
-          ? Math.min(width * 0.75, 1000)
+          ? Math.min(width * 0.75, theme.sizes.tabletLandscapeMaxWidth)
           : undefined;
 
   // Handle TV back button to focus sidebar

src/components/media/DetailsShell.tsx

@@ -61,7 +61,7 @@ export const DetailsShell = memo(
           <ScrollView>
             <Box flexDirection="row" padding="l" gap="l" position="relative">
               {/* Left column: poster */}
-              <Box width={isMobile ? 140 : 180}>
+              <Box width={isMobile ? theme.sizes.landscapePosterWidthMobile : theme.sizes.landscapePosterWidthTablet}>
                 <Box
                   borderRadius="l"
                   overflow="hidden"

src/components/media/HeroSection.tsx

@@ -17,7 +17,6 @@ import {
   HERO_CONTENT_SLIDE_DURATION_MS,
   HERO_CONTENT_SLIDE_DELAY_MS,
   HERO_DOT_ANIMATION_MS,
-  HERO_HEIGHT,
 } from '@/constants/ui';
 import { Button } from '@/components/basic/Button';
 
@@ -34,7 +33,7 @@ export const HeroSection = memo(({ hasTVPreferredFocus = false }: HeroSectionPro
   const isLandscape = width > height;
 
   // In landscape, scale hero height to avoid consuming the entire viewport
-  const heroHeight = isLandscape ? Math.min(HERO_HEIGHT, height * 0.7) : HERO_HEIGHT;
+  const heroHeight = isLandscape ? Math.min(theme.sizes.heroHeight, height * 0.7) : theme.sizes.heroHeight;
 
   const [activeIndex, setActiveIndex] = useState(0);
   const autoScrollRef = useRef<ReturnType<typeof setInterval> | null>(null);

src/hooks/useBreakpoint.ts

@@ -82,12 +82,6 @@ export interface ResponsiveLayoutResult {
     width: number;
     height: number;
 
-    /** Number of grid columns appropriate for current breakpoint and orientation */
-    columns: number;
-
-    /** Maximum content width for current breakpoint */
-    containerMaxWidth: number | undefined;
-
     /** Horizontal content padding for current breakpoint */
     contentPadding: number;
 
@@ -137,20 +131,6 @@ export function useResponsiveLayout(): ResponsiveLayoutResult {
     const isPlatformTV = Platform.isTV;
     const isLandscape = width > height;
 
-    // Grid columns based on breakpoint + orientation
-    const columns = useMemo(() => {
-        if (isTV) return isLandscape ? 5 : 4;
-        if (isTablet) return isLandscape ? 5 : 3;
-        return isLandscape ? 3 : 2;
-    }, [isTV, isTablet, isLandscape]);
-
-    // Max content width
-    const containerMaxWidth = useMemo(() => {
-        if (isTV) return Math.min(width * 0.7, 1200);
-        if (isTablet) return isLandscape ? Math.min(width * 0.9, 1100) : Math.min(width * 0.85, 900);
-        return undefined; // Full width on mobile
-    }, [isTV, isTablet, isLandscape, width]);
-
     // Content padding
     const contentPadding = useMemo(() => {
         if (isTV) return theme.spacing.xl;
@@ -191,8 +171,6 @@ export function useResponsiveLayout(): ResponsiveLayoutResult {
         isLandscape,
         width,
         height,
-        columns,
-        containerMaxWidth,
         contentPadding,
         isPlatformTV,
         splitLayout,

src/theme/theme.ts

@@ -118,6 +118,12 @@ const theme = createTheme({
         loadingIndicatorLogoSizeSmall: 35,
         loadingIndicatorLogoSizeLarge: 65,
         progressBarHeight: 6,
+        tabBarHeight: 65,
+        tabBarPaddingTop: 10,
+        heroHeight: 500,
+        tabletLandscapeMaxWidth: 1000,
+        landscapePosterWidthMobile: 140,
+        landscapePosterWidthTablet: 180,
     },
     // Focus styling for TV
     focus: {