From 45dac039f9e77f55fefe6ea1e761edd037bd13d8 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Sun, 1 Feb 2026 23:49:52 +0300
Subject: [PATCH] fix: improve admin user detail tabs scroll and sync buttons
 design

---
 src/pages/AdminUserDetail.tsx | 68 +++++++++++++++++++----------------
 1 file changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/pages/AdminUserDetail.tsx b/src/pages/AdminUserDetail.tsx
index 0b2b947..7001140 100644
--- a/src/pages/AdminUserDetail.tsx
+++ b/src/pages/AdminUserDetail.tsx
@@ -36,13 +36,15 @@ const MinusIcon = () => (
   </svg>
 );
 
-const SyncIcon = ({ className = 'w-5 h-5' }: { className?: string }) => (
+const ArrowDownIcon = ({ className = 'w-5 h-5' }: { className?: string }) => (
   <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M7.5 21L3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
-    />
+    <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
+  </svg>
+);
+
+const ArrowUpIcon = ({ className = 'w-5 h-5' }: { className?: string }) => (
+  <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 10.5L12 3m0 0l7.5 7.5M12 3v18" />
   </svg>
 );
 
@@ -310,23 +312,25 @@ export default function AdminUserDetail() {
       </div>
 
       {/* Tabs */}
-      <div className="mb-6 flex rounded-xl border border-dark-700 bg-dark-800/50">
-        {(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => (
-          <button
-            key={tab}
-            onClick={() => setActiveTab(tab)}
-            className={`flex-1 py-3 text-sm font-medium transition-colors ${
-              activeTab === tab
-                ? 'border-b-2 border-accent-400 text-accent-400'
-                : 'text-dark-400 hover:text-dark-200'
-            }`}
-          >
-            {tab === 'info' && t('admin.users.detail.tabs.info')}
-            {tab === 'subscription' && t('admin.users.detail.tabs.subscription')}
-            {tab === 'balance' && t('admin.users.detail.tabs.balance')}
-            {tab === 'sync' && t('admin.users.detail.tabs.sync')}
-          </button>
-        ))}
+      <div className="mb-6 overflow-x-auto rounded-xl border border-dark-700 bg-dark-800/50">
+        <div className="flex min-w-max">
+          {(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => (
+            <button
+              key={tab}
+              onClick={() => setActiveTab(tab)}
+              className={`flex-1 whitespace-nowrap px-4 py-3 text-sm font-medium transition-colors ${
+                activeTab === tab
+                  ? 'border-b-2 border-accent-400 text-accent-400'
+                  : 'text-dark-400 hover:text-dark-200'
+              }`}
+            >
+              {tab === 'info' && t('admin.users.detail.tabs.info')}
+              {tab === 'subscription' && t('admin.users.detail.tabs.subscription')}
+              {tab === 'balance' && t('admin.users.detail.tabs.balance')}
+              {tab === 'sync' && t('admin.users.detail.tabs.sync')}
+            </button>
+          ))}
+        </div>
       </div>
 
       {/* Content */}
@@ -823,22 +827,26 @@ export default function AdminUserDetail() {
             </div>
 
             {/* Sync buttons */}
-            <div className="flex gap-3">
+            <div className="grid grid-cols-2 gap-3">
               <button
                 onClick={handleSyncFromPanel}
                 disabled={actionLoading}
-                className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/20 py-3 text-accent-400 transition-colors hover:bg-accent-500/30 disabled:opacity-50"
+                className="flex flex-col items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4 text-accent-400 transition-all hover:bg-accent-500/20 disabled:opacity-50"
               >
-                <SyncIcon className={actionLoading ? 'animate-spin' : ''} />
-                {t('admin.users.detail.sync.fromPanel')}
+                <ArrowDownIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
+                <span className="text-center text-xs font-medium">
+                  {t('admin.users.detail.sync.fromPanel')}
+                </span>
               </button>
               <button
                 onClick={handleSyncToPanel}
                 disabled={actionLoading}
-                className="flex flex-1 items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/20 py-3 text-accent-400 transition-colors hover:bg-accent-500/30 disabled:opacity-50"
+                className="flex flex-col items-center justify-center gap-2 rounded-xl border border-accent-500/30 bg-accent-500/10 p-4 text-accent-400 transition-all hover:bg-accent-500/20 disabled:opacity-50"
               >
-                <SyncIcon className={actionLoading ? 'animate-spin' : ''} />
-                {t('admin.users.detail.sync.toPanel')}
+                <ArrowUpIcon className={`h-6 w-6 ${actionLoading ? 'animate-bounce' : ''}`} />
+                <span className="text-center text-xs font-medium">
+                  {t('admin.users.detail.sync.toPanel')}
+                </span>
               </button>
             </div>
           </div>