From e004d8103ba52b8dbe383061d6b609ce6024d45c Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Sun, 29 Mar 2026 03:18:21 +0300
Subject: [PATCH] fix: mobile layout and touch target improvements for admin
 settings

- SettingsTableRow: stack name above controls on mobile, show action
  buttons without hover (max-lg:opacity-100)
- SettingsMobileTabs: increase touch targets to 44px, add scroll spacers
- QuickToggles: increase chip touch targets
- SettingInput: increase display button touch target
- AdminSettings: add bottom padding buffer to mobile layout
---
 src/components/admin/QuickToggles.tsx       |  2 +-
 src/components/admin/SettingInput.tsx       |  2 +-
 src/components/admin/SettingsMobileTabs.tsx | 10 ++++++----
 src/components/admin/SettingsTableRow.tsx   | 19 ++++++++++++++-----
 src/pages/AdminSettings.tsx                 |  2 +-
 5 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/src/components/admin/QuickToggles.tsx b/src/components/admin/QuickToggles.tsx
index 2c40841..84fd030 100644
--- a/src/components/admin/QuickToggles.tsx
+++ b/src/components/admin/QuickToggles.tsx
@@ -39,7 +39,7 @@ export function QuickToggles({ settings, onUpdate, disabled, className }: QuickT
               onClick={() => onUpdate(setting.key, isOn ? 'false' : 'true')}
               disabled={disabled}
               className={cn(
-                'flex items-center gap-2 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-all',
+                'flex items-center gap-2 rounded-lg border px-2.5 py-2.5 text-xs font-medium transition-all',
                 isOn
                   ? 'border-success-500/20 bg-success-500/[0.08] text-dark-100'
                   : 'border-dark-600/50 bg-dark-700/20 text-dark-400',
diff --git a/src/components/admin/SettingInput.tsx b/src/components/admin/SettingInput.tsx
index 42da472..aef267e 100644
--- a/src/components/admin/SettingInput.tsx
+++ b/src/components/admin/SettingInput.tsx
@@ -184,7 +184,7 @@ export function SettingInput({ setting, onUpdate, disabled }: SettingInputProps)
     <button
       onClick={handleStart}
       disabled={disabled}
-      className="group flex min-w-[100px] max-w-[200px] items-center gap-2 truncate rounded-lg border border-dark-600 bg-dark-700 px-3 py-2 text-left font-mono text-sm text-dark-200 transition-colors hover:border-dark-500 hover:bg-dark-600 disabled:opacity-50"
+      className="group flex min-w-[100px] max-w-[200px] items-center gap-2 truncate rounded-lg border border-dark-600 bg-dark-700 px-3 py-2.5 text-left font-mono text-sm text-dark-200 transition-colors hover:border-dark-500 hover:bg-dark-600 disabled:opacity-50"
     >
       <span className="flex-1 truncate">{currentValue || '-'}</span>
       <span className="text-dark-500 opacity-0 transition-colors group-hover:text-accent-400 group-hover:opacity-100">
diff --git a/src/components/admin/SettingsMobileTabs.tsx b/src/components/admin/SettingsMobileTabs.tsx
index 9c8edfc..726a346 100644
--- a/src/components/admin/SettingsMobileTabs.tsx
+++ b/src/components/admin/SettingsMobileTabs.tsx
@@ -84,7 +84,7 @@ export function SettingsMobileTabs({
             setActiveSection('favorites');
             setExpandedGroup(null);
           }}
-          className={`flex shrink-0 items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium transition-all ${
+          className={`flex shrink-0 items-center gap-2 rounded-xl px-4 py-3 text-sm font-medium transition-all ${
             isFavoritesActive
               ? 'bg-accent-500/15 text-accent-400 ring-1 ring-accent-500/30'
               : 'bg-dark-800/50 text-dark-400 active:bg-dark-700'
@@ -116,7 +116,7 @@ export function SettingsMobileTabs({
                 setActiveSection(item.id);
                 setExpandedGroup(null);
               }}
-              className={`flex shrink-0 items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium transition-all ${
+              className={`flex shrink-0 items-center gap-2 rounded-xl px-4 py-3 text-sm font-medium transition-all ${
                 isActive
                   ? 'bg-accent-500/15 text-accent-400 ring-1 ring-accent-500/30'
                   : 'bg-dark-800/50 text-dark-400 active:bg-dark-700'
@@ -137,7 +137,7 @@ export function SettingsMobileTabs({
               key={group.id}
               ref={hasActiveChild ? activeRef : null}
               onClick={() => handleGroupTap(group.id)}
-              className={`flex shrink-0 items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-medium transition-all ${
+              className={`flex shrink-0 items-center gap-2 rounded-xl px-4 py-3 text-sm font-medium transition-all ${
                 hasActiveChild || isExpanded
                   ? 'bg-accent-500/15 text-accent-400 ring-1 ring-accent-500/30'
                   : 'bg-dark-800/50 text-dark-400 active:bg-dark-700'
@@ -148,6 +148,7 @@ export function SettingsMobileTabs({
             </button>
           );
         })}
+        <div className="w-3 shrink-0" aria-hidden="true" />
       </div>
 
       {/* Level 2: Sub-item chips (shown when a group is expanded) */}
@@ -164,7 +165,7 @@ export function SettingsMobileTabs({
                 <button
                   key={child.id}
                   onClick={() => setActiveSection(child.id)}
-                  className={`shrink-0 rounded-lg px-3 py-1.5 text-xs font-medium transition-all ${
+                  className={`shrink-0 rounded-lg px-3 py-2.5 text-sm font-medium transition-all ${
                     isActive
                       ? 'bg-accent-500/10 text-accent-400 ring-1 ring-accent-500/20'
                       : 'bg-dark-800/30 text-dark-500 active:bg-dark-700'
@@ -174,6 +175,7 @@ export function SettingsMobileTabs({
                 </button>
               );
             })}
+          <div className="w-3 shrink-0" aria-hidden="true" />
         </div>
       )}
     </div>
diff --git a/src/components/admin/SettingsTableRow.tsx b/src/components/admin/SettingsTableRow.tsx
index 8d3c6c1..df76f8f 100644
--- a/src/components/admin/SettingsTableRow.tsx
+++ b/src/components/admin/SettingsTableRow.tsx
@@ -67,9 +67,13 @@ export function SettingsTableRow({
         className,
       )}
     >
-      <div className={cn(isLongValue ? 'space-y-3' : 'flex items-center gap-4')}>
+      <div
+        className={cn(
+          isLongValue ? 'space-y-3' : 'flex flex-col gap-2 lg:flex-row lg:items-center lg:gap-4',
+        )}
+      >
         {/* Left side: name, badges, key */}
-        <div className={cn('min-w-0', !isLongValue && 'flex-1')}>
+        <div className={cn('min-w-0', !isLongValue && 'lg:flex-1')}>
           {/* Name + badges row */}
           <div className="flex flex-wrap items-center gap-1.5">
             <span className="text-[13px] font-medium text-dark-100">{displayName}</span>
@@ -106,7 +110,12 @@ export function SettingsTableRow({
         </div>
 
         {/* Right side: control + action buttons */}
-        <div className={cn('flex items-center gap-2', isLongValue ? 'w-full' : 'flex-shrink-0')}>
+        <div
+          className={cn(
+            'flex items-center gap-2',
+            isLongValue ? 'w-full' : 'self-end lg:flex-shrink-0',
+          )}
+        >
           {setting.read_only ? (
             <span className="max-w-[240px] truncate rounded bg-dark-700/30 px-3 py-1.5 font-mono text-xs text-dark-400">
               {isBool
@@ -133,7 +142,7 @@ export function SettingsTableRow({
             <button
               onClick={onReset}
               disabled={isResetting}
-              className="flex-shrink-0 rounded-lg p-1.5 text-dark-500 opacity-0 transition-all hover:bg-dark-700 hover:text-dark-200 disabled:opacity-50 group-hover:opacity-100"
+              className="flex-shrink-0 rounded-lg p-1.5 text-dark-500 opacity-0 transition-all hover:bg-dark-700 hover:text-dark-200 disabled:opacity-50 group-hover:opacity-100 max-lg:opacity-100"
               title={t('admin.settings.reset')}
               aria-label={t('admin.settings.reset')}
             >
@@ -148,7 +157,7 @@ export function SettingsTableRow({
               'flex-shrink-0 rounded-lg p-1.5 transition-all',
               isFavorite
                 ? 'text-warning-400 hover:bg-warning-500/15'
-                : 'text-dark-500 opacity-0 hover:bg-dark-700/50 hover:text-warning-400 group-hover:opacity-100',
+                : 'text-dark-500 opacity-0 hover:bg-dark-700/50 hover:text-warning-400 group-hover:opacity-100 max-lg:opacity-100',
             )}
             title={
               isFavorite
diff --git a/src/pages/AdminSettings.tsx b/src/pages/AdminSettings.tsx
index 700a7b3..51bccdb 100644
--- a/src/pages/AdminSettings.tsx
+++ b/src/pages/AdminSettings.tsx
@@ -225,7 +225,7 @@ export default function AdminSettings() {
   return (
     <>
       {/* Mobile Layout */}
-      <div className="space-y-4 lg:hidden">
+      <div className="space-y-4 pb-4 lg:hidden">
         <SettingsMobileTabs
           activeSection={activeSection}
           setActiveSection={setActiveSection}