From 1b8f61df5f284a4510a363bae4bdc445aa13cf65 Mon Sep 17 00:00:00 2001
From: Marco Sadjadi <marco@buildmymcpserver.local>
Date: Mon, 25 May 2026 17:36:31 +0200
Subject: [PATCH] fix(admin): make whole support-ticket row clickable
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 apps/web/app/admin/support/page.tsx | 78 ++++++++++++++---------------
 1 file changed, 37 insertions(+), 41 deletions(-)

diff --git a/apps/web/app/admin/support/page.tsx b/apps/web/app/admin/support/page.tsx
index 7903b03..fb51f83 100644
--- a/apps/web/app/admin/support/page.tsx
+++ b/apps/web/app/admin/support/page.tsx
@@ -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>