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

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