From b92375e2d48195fc43b3b81c7d57c13fbc380791 Mon Sep 17 00:00:00 2001
From: Z User <z@container>
Date: Sat, 28 Mar 2026 03:50:54 +0000
Subject: [PATCH] Fix horizontal scroll issue in admin dashboard

---
 admin.html | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/admin.html b/admin.html
index 3f2894b..c891273 100644
--- a/admin.html
+++ b/admin.html
@@ -19,6 +19,10 @@
             --dark-border: #334155;
         }
         
+        html, body {
+            overflow-x: hidden;
+        }
+        
         body {
             background: var(--dark-background);
             color: var(--dark-primary-text);
@@ -525,31 +529,31 @@
                 <tr class="table-row">
                     <td class="px-4 py-3">
                         <div class="flex items-center gap-3">
-                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-indigo-400 flex items-center justify-center font-medium text-slate-900 text-sm">
+                            <div class="w-8 h-8 rounded-full bg-gradient-to-br from-cyan-400 to-indigo-400 flex items-center justify-center font-medium text-slate-900 text-sm flex-shrink-0">
                                 ${(u.name || u.email || '?')[0].toUpperCase()}
                             </div>
-                            <span>${escapeHtml(u.name || 'No name')}</span>
+                            <span class="truncate">${escapeHtml(u.name || 'No name')}</span>
                         </div>
                     </td>
-                    <td class="px-4 py-3 text-slate-400">${escapeHtml(u.email || '-')}</td>
+                    <td class="px-4 py-3 text-slate-400 truncate max-w-[200px]">${escapeHtml(u.email || '-')}</td>
                     <td class="px-4 py-3">
-                        <span class="px-2 py-0.5 rounded text-xs ${u.role === 'admin' ? 'bg-purple-500/20 text-purple-400' : 'bg-slate-700 text-slate-300'}">
+                        <span class="px-2 py-0.5 rounded text-xs whitespace-nowrap ${u.role === 'admin' ? 'bg-purple-500/20 text-purple-400' : 'bg-slate-700 text-slate-300'}">
                             ${u.role || 'user'}
                         </span>
                     </td>
-                    <td class="px-4 py-3 font-medium">${(u.credits || 0).toLocaleString()}</td>
-                    <td class="px-4 py-3 text-slate-400 text-sm">${formatDate(u.created_at)}</td>
+                    <td class="px-4 py-3 font-medium whitespace-nowrap">${(u.credits || 0).toLocaleString()}</td>
+                    <td class="px-4 py-3 text-slate-400 text-sm whitespace-nowrap">${formatDate(u.created_at)}</td>
                     <td class="px-4 py-3">
-                        <div class="flex gap-2">
-                            <button onclick="openCreditsModal('${u.id}', '${escapeHtml(u.name || u.email)}', ${u.credits || 0})" class="btn-secondary px-3 py-1 rounded text-sm">
+                        <div class="flex gap-2 flex-nowrap">
+                            <button onclick="openCreditsModal('${u.id}', '${escapeHtml(u.name || u.email)}', ${u.credits || 0})" class="btn-secondary px-3 py-1 rounded text-sm whitespace-nowrap">
                                 Credits
                             </button>
                             ${u.role === 'admin' ? `
-                                <button onclick="toggleAdmin('${u.id}', 'user')" class="px-3 py-1 rounded text-sm bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 transition-colors">
+                                <button onclick="toggleAdmin('${u.id}', 'user')" class="px-3 py-1 rounded text-sm whitespace-nowrap bg-amber-500/20 text-amber-400 hover:bg-amber-500/30 transition-colors">
                                     Remove Admin
                                 </button>
                             ` : `
-                                <button onclick="toggleAdmin('${u.id}', 'admin')" class="px-3 py-1 rounded text-sm bg-purple-500/20 text-purple-400 hover:bg-purple-500/30 transition-colors">
+                                <button onclick="toggleAdmin('${u.id}', 'admin')" class="px-3 py-1 rounded text-sm whitespace-nowrap bg-purple-500/20 text-purple-400 hover:bg-purple-500/30 transition-colors">
                                     Make Admin
                                 </button>
                             `}