From ba0b646576a542755ca3de311a310c1e401797f2 Mon Sep 17 00:00:00 2001
From: Gauvain <contact@uruk.dev>
Date: Thu, 4 Jun 2026 12:31:59 +0200
Subject: [PATCH] fix(settings): uniform 56px row height and consistent group
 spacing on Playback & Controls

---
 .../settings/playback-controls/page.tsx       | 20 +++++++++----------
 components/list/ListItem.tsx                  |  5 +++--
 .../settings/index/SettingsSelectRow.tsx      |  2 +-
 3 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx b/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx
index 2771117f9..132dddffe 100644
--- a/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx
+++ b/app/(auth)/(tabs)/(home)/settings/playback-controls/page.tsx
@@ -20,18 +20,16 @@ export default function PlaybackControlsPage() {
       }}
     >
       <View
-        className='p-4 flex flex-col'
-        style={{ paddingTop: Platform.OS === "android" ? 10 : 0 }}
+        className='p-4'
+        style={{ gap: 16, paddingTop: Platform.OS === "android" ? 10 : 0 }}
       >
-        <View className='mb-4'>
-          <MediaProvider>
-            <MediaToggles className='mb-4' />
-            <GestureControls className='mb-4' />
-            <PlaybackControlsSettings />
-            <MpvBufferSettings />
-            <MpvVoSettings />
-          </MediaProvider>
-        </View>
+        <MediaProvider>
+          <MediaToggles />
+          <GestureControls />
+          <PlaybackControlsSettings />
+          <MpvBufferSettings />
+          <MpvVoSettings />
+        </MediaProvider>
         {!Platform.isTV && <ChromecastSettings />}
       </View>
     </ScrollView>
diff --git a/components/list/ListItem.tsx b/components/list/ListItem.tsx
index 44b5f93c8..031f68321 100644
--- a/components/list/ListItem.tsx
+++ b/components/list/ListItem.tsx
@@ -34,12 +34,13 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
 }) => {
   const effectiveSubtitle = disabledByAdmin ? "Disabled by admin" : subtitle;
   const isDisabled = disabled || disabledByAdmin;
+  const hasSubtitle = Boolean(effectiveSubtitle);
   if (onPress)
     return (
       <TouchableOpacity
         disabled={isDisabled}
         onPress={onPress}
-        className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[48px] py-2.5 px-4 ${isDisabled ? "opacity-50" : ""}`}
+        className={`flex flex-row items-center justify-between bg-neutral-900 ${hasSubtitle ? "min-h-[56px] py-2.5" : "h-[56px]"} px-4 ${isDisabled ? "opacity-50" : ""}`}
         {...(viewProps as any)}
       >
         <ListItemContent
@@ -58,7 +59,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
     );
   return (
     <View
-      className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[48px] py-2.5 px-4 ${isDisabled ? "opacity-50" : ""}`}
+      className={`flex flex-row items-center justify-between bg-neutral-900 ${hasSubtitle ? "min-h-[56px] py-2.5" : "h-[56px]"} px-4 ${isDisabled ? "opacity-50" : ""}`}
       {...viewProps}
     >
       <ListItemContent
diff --git a/components/settings/index/SettingsSelectRow.tsx b/components/settings/index/SettingsSelectRow.tsx
index a2a60f43c..f9830174a 100644
--- a/components/settings/index/SettingsSelectRow.tsx
+++ b/components/settings/index/SettingsSelectRow.tsx
@@ -28,7 +28,7 @@ export const SettingsSelectRow: React.FC<Props> = ({
       groups={groups}
       title={dropdownTitle}
       trigger={
-        <View className='flex flex-row items-center justify-between py-1.5 pl-3'>
+        <View className='flex flex-row items-center justify-between pl-3'>
           <Text className='mr-1 text-[#8E8D91]'>{valueLabel}</Text>
           <Ionicons name='chevron-expand-sharp' size={18} color='#5A5960' />
         </View>