fix(tv): padding

This commit is contained in:
Fredrik Burmester
2026-05-30 21:41:27 +02:00
parent 5a3e9c51c9
commit aedb7bc51d
2 changed files with 13 additions and 7 deletions

View File

@@ -20,6 +20,8 @@ interface TVSearchSectionProps extends ViewProps {
onItemPress: (item: BaseItemDto) => void;
onItemLongPress?: (item: BaseItemDto) => void;
imageUrlGetter?: (item: BaseItemDto) => string | undefined;
/** Override the horizontal edge padding (defaults to the scaled TV padding). */
horizontalPadding?: number;
}
export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
@@ -31,12 +33,14 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
onItemPress,
onItemLongPress,
imageUrlGetter,
horizontalPadding,
...props
}) => {
const typography = useScaledTVTypography();
const posterSizes = useScaledTVPosterSizes();
const sizes = useScaledTVSizes();
const ITEM_GAP = sizes.gaps.item;
const edgePadding = horizontalPadding ?? sizes.padding.horizontal;
const flatListRef = useRef<FlatList<BaseItemDto>>(null);
const [focusedCount, setFocusedCount] = useState(0);
const prevFocusedCount = useRef(0);
@@ -273,7 +277,7 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
fontWeight: "700",
color: "#FFFFFF",
marginBottom: 20,
marginLeft: sizes.padding.horizontal,
marginLeft: edgePadding,
letterSpacing: 0.5,
}}
>
@@ -294,10 +298,10 @@ export const TVSearchSection: React.FC<TVSearchSectionProps> = ({
getItemLayout={getItemLayout}
style={{ overflow: "visible" }}
contentInset={{
left: sizes.padding.horizontal,
right: sizes.padding.horizontal,
left: edgePadding,
right: edgePadding,
}}
contentOffset={{ x: -sizes.padding.horizontal, y: 0 }}
contentOffset={{ x: -edgePadding, y: 0 }}
contentContainerStyle={{
paddingVertical: SCALE_PADDING,
}}

View File

@@ -49,8 +49,8 @@ export const TVGaps = {
* Base padding values in pixels.
*/
export const TVPadding = {
/** Horizontal padding from screen edges */
horizontal: 90,
/** Horizontal padding from screen edges (static — matches native search inset) */
horizontal: 80,
/** Padding to accommodate scale animations (1.05x) */
scale: 20,
@@ -142,7 +142,9 @@ export const useScaledTVSizes = (): ScaledTVSizes => {
large: Math.round(scaleSize(TVGaps.large) * scale),
},
padding: {
horizontal: Math.round(scaleSize(TVPadding.horizontal) * scale),
// Static: matches the native tvOS search bar inset, which is a fixed
// point value and does not change with the typography scale setting.
horizontal: TVPadding.horizontal,
scale: Math.round(scaleSize(TVPadding.scale) * scale),
vertical: Math.round(scaleSize(TVPadding.vertical) * scale),
heroHeight: TVPadding.heroHeight * scale,