From ae825e1b6719fe192fb11b24a8f44623f59a4d54 Mon Sep 17 00:00:00 2001
From: Gauvain <contact@uruk.dev>
Date: Fri, 19 Jun 2026 21:39:58 +0200
Subject: [PATCH] fix(tv): center option label when no checkmark shown

The inner row applied a constant left padding meant to balance the
checkmark group on selected cards. On base cards (no checkmark) it
pushed the label slightly right, off-center. Apply the offset only
when the checkmark is rendered (selected and unfocused).
---
 components/tv/TVOptionCard.tsx | 53 +++++++++++++++++++---------------
 1 file changed, 30 insertions(+), 23 deletions(-)

diff --git a/components/tv/TVOptionCard.tsx b/components/tv/TVOptionCard.tsx
index 200f2a9f..0bb16c88 100644
--- a/components/tv/TVOptionCard.tsx
+++ b/components/tv/TVOptionCard.tsx
@@ -61,17 +61,39 @@ export const TVOptionCard = React.forwardRef<View, TVOptionCardProps>(
             },
           ]}
         >
-          <Text
+          {/* Selected + unfocused: label and checkmark form a centered group.
+              The left padding offsets the checkmark's width so the label stays
+              optically centered. Without a checkmark, no offset → label centered. */}
+          <View
             style={{
-              fontSize: typography.callout,
-              color: focused ? "#000" : "#fff",
-              fontWeight: focused || selected ? "600" : "400",
-              textAlign: "center",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+              // Offset checkmark width only when it's shown, else label sits right.
+              paddingLeft: selected && !focused ? scaleSize(10) : 0,
             }}
-            numberOfLines={4}
           >
-            {label}
-          </Text>
+            <Text
+              style={{
+                fontSize: typography.callout,
+                color: focused ? "#000" : "#fff",
+                fontWeight: focused || selected ? "600" : "400",
+                textAlign: "center",
+                flexShrink: 1,
+              }}
+              numberOfLines={4}
+            >
+              {label}
+            </Text>
+            {selected && !focused && (
+              <Ionicons
+                name='checkmark'
+                size={scaleSize(26)}
+                color='rgba(255,255,255,0.8)'
+                style={{ marginLeft: scaleSize(8), flexShrink: 0 }}
+              />
+            )}
+          </View>
           {sublabel && (
             <Text
               style={{
@@ -85,21 +107,6 @@ export const TVOptionCard = React.forwardRef<View, TVOptionCardProps>(
               {sublabel}
             </Text>
           )}
-          {selected && !focused && (
-            <View
-              style={{
-                position: "absolute",
-                top: 8,
-                right: 8,
-              }}
-            >
-              <Ionicons
-                name='checkmark'
-                size={16}
-                color='rgba(255,255,255,0.8)'
-              />
-            </View>
-          )}
         </Animated.View>
       </Pressable>
     );