opensource/zpan
3
0
Fork 0
mirror of https://github.com/saltbo/zpan.git synced 2026-08-30 17:50:07 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(admin): prevent user table overflow

Browse Source
This commit is contained in:
saltbo
2026-05-04 22:33:35 -04:00
parent e15334e094
commit 13ff831585
2 changed files with 57 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/_authenticated/admin/users/index.tsx
+33 -19
View File
@@ -206,24 +206,30 @@ function UsersPage() {
</div>
)}
<div className="overflow-x-auto rounded-md border">
<table className="w-full text-sm">
<div className="overflow-hidden rounded-md border">
<table className="w-full table-fixed text-sm">
<thead>
<tr className="border-b bg-muted/50">
<th className="w-10 px-4 py-3 text-left font-medium">
<th className="w-[4%] px-4 py-3 text-left font-medium">
<Checkbox
aria-label={t('admin.users.selectPage')}
checked={allPageSelected}
onCheckedChange={(checked) => togglePageSelection(checked === true)}
/>
</th>
<th className="px-4 py-3 text-left font-medium">{t('admin.users.colName')}</th>
<th className="hidden px-4 py-3 text-left font-medium sm:table-cell">{t('admin.users.colEmail')}</th>
<th className="px-4 py-3 text-left font-medium">{t('admin.users.colRole')}</th>
<th className="px-4 py-3 text-left font-medium">{t('admin.users.colStatus')}</th>
<th className="hidden px-4 py-3 text-left font-medium md:table-cell">{t('admin.users.colQuota')}</th>
<th className="hidden px-4 py-3 text-left font-medium lg:table-cell">{t('admin.users.colCreatedAt')}</th>
<th className="px-4 py-3 text-right font-medium">{t('admin.users.colActions')}</th>
<th className="w-[21%] px-4 py-3 text-left font-medium">{t('admin.users.colName')}</th>
<th className="hidden w-[23%] px-4 py-3 text-left font-medium sm:table-cell">
{t('admin.users.colEmail')}
</th>
<th className="w-[9%] px-4 py-3 text-left font-medium">{t('admin.users.colRole')}</th>
<th className="w-[10%] px-4 py-3 text-left font-medium">{t('admin.users.colStatus')}</th>
<th className="hidden w-[14%] px-4 py-3 text-left font-medium md:table-cell">
{t('admin.users.colQuota')}
</th>
<th className="hidden w-[11%] truncate px-4 py-3 text-left font-medium lg:table-cell">
{t('admin.users.colCreatedAt')}
</th>
<th className="w-[8%] px-4 py-3 text-right font-medium">{t('admin.users.colActions')}</th>
</tr>
</thead>
<tbody>
@@ -370,26 +376,34 @@ function UserTableRow({
/>
</td>
<td className="px-4 py-3 font-medium">
<div className="flex items-center gap-3">
<Avatar className="h-8 w-8 shrink-0">
<div className="flex min-w-0 items-center gap-3">
<Avatar className="h-7 w-7 shrink-0">
{user.image && <AvatarImage src={user.image} alt={user.name || user.username} />}
<AvatarFallback className="text-xs">{getInitials(user.name || user.username || user.email)}</AvatarFallback>
</Avatar>
<span>{user.name || user.username}</span>
<span className="min-w-0 truncate" title={user.name || user.username}>
{user.name || user.username}
</span>
</div>
</td>
<td className="hidden px-4 py-3 text-muted-foreground sm:table-cell">{user.email}</td>
<td className="px-4 py-3">
<td className="hidden truncate px-4 py-3 text-muted-foreground sm:table-cell" title={user.email}>
{user.email}
</td>
<td className="whitespace-nowrap px-4 py-3">
<span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${roleBadge}`}>{roleLabel}</span>
</td>
<td className="px-4 py-3">
<td className="whitespace-nowrap px-4 py-3">
<span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${statusBadge}`}>
{user.banned ? t('admin.users.disabled') : t('admin.users.active')}
</span>
</td>
{showQuota && <td className="hidden px-4 py-3 text-muted-foreground md:table-cell">{quotaLabel}</td>}
<td className="hidden px-4 py-3 text-muted-foreground lg:table-cell">{formatDate(user.createdAt)}</td>
<td className="px-4 py-3">
{showQuota && (
<td className="hidden whitespace-nowrap px-4 py-3 text-muted-foreground md:table-cell">{quotaLabel}</td>
)}
<td className="hidden truncate px-4 py-3 text-muted-foreground lg:table-cell" title={formatDate(user.createdAt)}>
{formatDate(user.createdAt)}
</td>
<td className="whitespace-nowrap px-4 py-3">
<div className="flex items-center justify-end gap-1">
{showQuota && (
<Button
src/routes/_authenticated/users/index.tsx
+24 -18
View File
@@ -87,17 +87,17 @@ function UsersPage() {
</div>
</div>
<div className="overflow-x-auto rounded-md border">
<table className="w-full text-sm">
<div className="overflow-hidden rounded-md border">
<table className="w-full table-fixed text-sm">
<thead>
<tr className="border-b bg-muted/50">
<th className="px-4 py-3 text-left font-medium">{t('admin.users.colName')}</th>
<th className="px-4 py-3 text-left font-medium">{t('admin.users.colEmail')}</th>
<th className="px-4 py-3 text-left font-medium">{t('admin.users.colRole')}</th>
<th className="px-4 py-3 text-left font-medium">{t('admin.users.colStatus')}</th>
<th className="px-4 py-3 text-left font-medium">{t('admin.users.colQuota')}</th>
<th className="px-4 py-3 text-left font-medium">{t('admin.users.colCreatedAt')}</th>
<th className="px-4 py-3 text-right font-medium">{t('admin.users.colActions')}</th>
<th className="w-[23%] px-4 py-3 text-left font-medium">{t('admin.users.colName')}</th>
<th className="w-[25%] px-4 py-3 text-left font-medium">{t('admin.users.colEmail')}</th>
<th className="w-[9%] px-4 py-3 text-left font-medium">{t('admin.users.colRole')}</th>
<th className="w-[10%] px-4 py-3 text-left font-medium">{t('admin.users.colStatus')}</th>
<th className="w-[14%] px-4 py-3 text-left font-medium">{t('admin.users.colQuota')}</th>
<th className="w-[11%] truncate px-4 py-3 text-left font-medium">{t('admin.users.colCreatedAt')}</th>
<th className="w-[8%] px-4 py-3 text-right font-medium">{t('admin.users.colActions')}</th>
</tr>
</thead>
<tbody>
@@ -191,26 +191,32 @@ function UserTableRow({
return (
<tr className="border-b last:border-0 hover:bg-muted/30">
<td className="px-4 py-3 font-medium">
<div className="flex items-center gap-3">
<Avatar className="h-8 w-8 shrink-0">
<div className="flex min-w-0 items-center gap-3">
<Avatar className="h-7 w-7 shrink-0">
{user.image && <AvatarImage src={user.image} alt={user.name || user.username} />}
<AvatarFallback className="text-xs">{getInitials(user.name || user.username || user.email)}</AvatarFallback>
</Avatar>
<span>{user.name || user.username}</span>
<span className="min-w-0 truncate" title={user.name || user.username}>
{user.name || user.username}
</span>
</div>
</td>
<td className="px-4 py-3 text-muted-foreground">{user.email}</td>
<td className="px-4 py-3">
<td className="truncate px-4 py-3 text-muted-foreground" title={user.email}>
{user.email}
</td>
<td className="whitespace-nowrap px-4 py-3">
<span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${roleBadge}`}>{roleLabel}</span>
</td>
<td className="px-4 py-3">
<td className="whitespace-nowrap px-4 py-3">
<span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${statusBadge}`}>
{user.banned ? t('admin.users.disabled') : t('admin.users.active')}
</span>
</td>
<td className="px-4 py-3 text-muted-foreground">{quotaLabel}</td>
<td className="px-4 py-3 text-muted-foreground">{formatDate(user.createdAt)}</td>
<td className="px-4 py-3">
<td className="whitespace-nowrap px-4 py-3 text-muted-foreground">{quotaLabel}</td>
<td className="truncate px-4 py-3 text-muted-foreground" title={formatDate(user.createdAt)}>
{formatDate(user.createdAt)}
</td>
<td className="whitespace-nowrap px-4 py-3">
<div className="flex items-center justify-end gap-1">
<Button
variant="ghost"