Fix horizontal scroll issue in admin dashboard

This commit is contained in:
Z User 2026-03-28 03:50:54 +00:00
parent 58e86973b2
commit b92375e2d4

View File

@ -19,6 +19,10 @@
--dark-border: #334155; --dark-border: #334155;
} }
html, body {
overflow-x: hidden;
}
body { body {
background: var(--dark-background); background: var(--dark-background);
color: var(--dark-primary-text); color: var(--dark-primary-text);
@ -525,31 +529,31 @@
<tr class="table-row"> <tr class="table-row">
<td class="px-4 py-3"> <td class="px-4 py-3">
<div class="flex items-center gap-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()} ${(u.name || u.email || '?')[0].toUpperCase()}
</div> </div>
<span>${escapeHtml(u.name || 'No name')}</span> <span class="truncate">${escapeHtml(u.name || 'No name')}</span>
</div> </div>
</td> </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"> <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'} ${u.role || 'user'}
</span> </span>
</td> </td>
<td class="px-4 py-3 font-medium">${(u.credits || 0).toLocaleString()}</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">${formatDate(u.created_at)}</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"> <td class="px-4 py-3">
<div class="flex gap-2"> <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"> <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 Credits
</button> </button>
${u.role === 'admin' ? ` ${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 Remove Admin
</button> </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 Make Admin
</button> </button>
`} `}