From 09584fc901d778453fbda437d643f4bd9c4321e3 Mon Sep 17 00:00:00 2001
From: c0mrade <killmy666@gmail.com>
Date: Mon, 2 Feb 2026 00:45:08 +0300
Subject: [PATCH] fix: use pill-style tabs in admin user detail page

---
 src/pages/AdminUserDetail.tsx | 39 ++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/pages/AdminUserDetail.tsx b/src/pages/AdminUserDetail.tsx
index 7001140..0bc29fa 100644
--- a/src/pages/AdminUserDetail.tsx
+++ b/src/pages/AdminUserDetail.tsx
@@ -312,25 +312,26 @@ export default function AdminUserDetail() {
       </div>
 
       {/* Tabs */}
-      <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
+        className="scrollbar-hide -mx-4 mb-6 flex gap-2 overflow-x-auto px-4 py-1"
+        style={{ WebkitOverflowScrolling: 'touch' }}
+      >
+        {(['info', 'subscription', 'balance', 'sync'] as const).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`shrink-0 whitespace-nowrap rounded-xl px-4 py-2.5 text-sm font-medium transition-all ${
+              activeTab === tab
+                ? 'bg-accent-500/15 text-accent-400 ring-1 ring-accent-500/30'
+                : 'bg-dark-800/50 text-dark-400 active:bg-dark-700'
+            }`}
+          >
+            {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>
 
       {/* Content */}