From be884ce6e66b10800dab6dfdc55ce6769fbfe40e Mon Sep 17 00:00:00 2001
From: Uruk <contact@uruk.dev>
Date: Mon, 1 Sep 2025 22:49:30 +0200
Subject: [PATCH] fix: improve list item height consistency and accessibility

Replaces fixed height with minimum height to ensure proper content display and accessibility compliance.

Changes list items from fixed 44px height to minimum height, allowing content to expand naturally while maintaining the minimum touch target size.

Adds specific styling to gesture control settings items to accommodate longer descriptions and improve readability.
---
 components/list/ListItem.tsx            | 4 ++--
 components/settings/GestureControls.tsx | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/components/list/ListItem.tsx b/components/list/ListItem.tsx
index f0880752..0770bbe5 100644
--- a/components/list/ListItem.tsx
+++ b/components/list/ListItem.tsx
@@ -34,7 +34,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
       <TouchableOpacity
         disabled={disabled}
         onPress={onPress}
-        className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 pl-4 ${
+        className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[44px] pr-4 pl-4 ${
           disabled ? "opacity-50" : ""
         }`}
         {...(viewProps as any)}
@@ -54,7 +54,7 @@ export const ListItem: React.FC<PropsWithChildren<Props>> = ({
     );
   return (
     <View
-      className={`flex flex-row items-center justify-between bg-neutral-900 h-11 pr-4 pl-4 ${
+      className={`flex flex-row items-center justify-between bg-neutral-900 min-h-[44px] pr-4 pl-4 ${
         disabled ? "opacity-50" : ""
       }`}
       {...viewProps}
diff --git a/components/settings/GestureControls.tsx b/components/settings/GestureControls.tsx
index bb77af99..f6c1e226 100644
--- a/components/settings/GestureControls.tsx
+++ b/components/settings/GestureControls.tsx
@@ -36,6 +36,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
             "home.settings.gesture_controls.horizontal_swipe_skip_description",
           )}
           disabled={pluginSettings?.enableHorizontalSwipeSkip?.locked}
+          className='min-h-[72px] py-3'
         >
           <Switch
             value={settings.enableHorizontalSwipeSkip}
@@ -52,6 +53,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
             "home.settings.gesture_controls.left_side_brightness_description",
           )}
           disabled={pluginSettings?.enableLeftSideBrightnessSwipe?.locked}
+          className='min-h-[72px] py-3'
         >
           <Switch
             value={settings.enableLeftSideBrightnessSwipe}
@@ -68,6 +70,7 @@ export const GestureControls: React.FC<Props> = ({ ...props }) => {
             "home.settings.gesture_controls.right_side_volume_description",
           )}
           disabled={pluginSettings?.enableRightSideVolumeSwipe?.locked}
+          className='min-h-[72px] py-3'
         >
           <Switch
             value={settings.enableRightSideVolumeSwipe}