marco/buildmymcpserver
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(admin): make whole support-ticket row clickable
All checks were successful
Deploy to Production / deploy (push) Successful in 52s
Details

Browse Source 
Table-cell Link only wrapped the subject text — clicks on email/status/time
cells did nothing, which read as 'cannot open ticket' for the admin. Convert
to a flex-grid Link wrapping the entire row, same pattern as the user-side
/settings/support list.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Marco Sadjadi 2026-05-25 17:36:31 +02:00
parent 20910f5466
commit 1b8f61df5f
1 changed files with 37 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
apps/web/app/admin/support/page.tsx
View File

@ -45,7 +45,10 @@ export default function AdminSupport() {
<div className="mx-auto max-w-6xl px-6 py-8">
<div className="flex items-baseline justify-between">
<div>
<Link href="/admin" className="text-[12px] text-[--color-fg-muted] hover:text-[--color-fg]">
<Link
href="/admin"
className="text-[12px] text-[--color-fg-muted] hover:text-[--color-fg]"
>
← Admin
</Link>
<h1 className="mt-1 text-[22px] font-semibold tracking-tight">Support tickets</h1>
@ -70,7 +73,7 @@ export default function AdminSupport() {
{error && <p className="mt-4 text-[12.5px] text-[--color-danger]">{error}</p>}
<div className="panel mt-6">
<div className="panel mt-6 overflow-hidden">
{rows === null && (
<div className="p-6 text-center">
<Loader2 className="mx-auto animate-spin text-[--color-fg-muted]" size={18} />
@ -82,49 +85,42 @@ export default function AdminSupport() {
</div>
)}
{rows && filtered.length > 0 && (
<table className="w-full text-[12.5px]">
<thead className="border-b border-[--color-border] text-[--color-fg-subtle]">
<tr>
<th className="px-4 py-2 text-left font-medium">Subject</th>
<th className="px-4 py-2 text-left font-medium">From</th>
<th className="px-4 py-2 text-left font-medium">Status</th>
<th className="px-4 py-2 text-left font-medium">Last activity</th>
</tr>
</thead>
<tbody>
{filtered.map((r) => (
<tr
key={r.ticket.id}
className="border-b border-[--color-border] last:border-0 hover:bg-[--color-bg-subtle]"
>
<td className="px-4 py-2.5">
<Link
href={`/admin/support/${r.ticket.id}`}
className="font-medium hover:text-[--color-accent]"
>
{r.ticket.subject}
</Link>
</td>
<td className="mono px-4 py-2.5 text-[--color-fg-muted]">
{r.userEmail ??
(r.ticket.guestEmail
? `${r.ticket.guestEmail} (guest)`
: 'unknown')}
</td>
<td className="px-4 py-2.5">
<ul className="divide-y divide-[--color-border]">
{filtered.map((r) => {
const from = r.userEmail
? `${r.userName ? `${r.userName} · ` : ''}${r.userEmail}`
: r.ticket.guestEmail
? `${r.ticket.guestEmail} (guest)`
: 'unknown';
return (
<li key={r.ticket.id}>
{/* Whole row is the link — table-style layout via flex
so any pixel inside is clickable, not just the subject. */}
<Link
href={`/admin/support/${r.ticket.id}`}
className="grid grid-cols-[1fr_auto_auto] items-center gap-3 px-4 py-3 transition-colors hover:bg-[--color-bg-subtle]"
>
<div className="min-w-0">
<div className="truncate text-[13px] font-medium text-[--color-fg]">
{r.ticket.subject}
</div>
<div className="mono mt-0.5 truncate text-[11.5px] text-[--color-fg-subtle]">
{from}
</div>
</div>
<span
className={`rounded-full px-2 py-0.5 text-[10.5px] ${STATUS_BADGE[r.ticket.status]}`}
className={`mono shrink-0 rounded-full px-2 py-0.5 text-[10.5px] ${STATUS_BADGE[r.ticket.status]}`}
>
{r.ticket.status.replace('_', ' ')}
</span>
</td>
<td className="px-4 py-2.5 text-[--color-fg-muted]">
{new Date(r.ticket.lastMessageAt).toLocaleString()}
</td>
</tr>
))}
</tbody>
</table>
<span className="shrink-0 whitespace-nowrap text-[11px] text-[--color-fg-muted]">
{new Date(r.ticket.lastMessageAt).toLocaleString()}
</span>
</Link>
</li>
);
})}
</ul>
)}
</div>
</div>