From 74a50f8dcae4fa5622b5021487156bb604877ac0 Mon Sep 17 00:00:00 2001
From: Lucas Winther <lucwin@ece.au.dk>
Date: Wed, 19 Aug 2026 05:31:20 +0200
Subject: [PATCH] fix(next to expire): the headline answers the cursor
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It is the thing on the page a reader is most likely to tap and the only
clickable text in the panel that did nothing under the pointer — the
queued deadlines beneath it brighten, and every list row brightens, so
the headline read as a heading rather than as a way in.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 src/client/components/NextUp.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/client/components/NextUp.tsx b/src/client/components/NextUp.tsx
index 64915ba..816d84e 100644
--- a/src/client/components/NextUp.tsx
+++ b/src/client/components/NextUp.tsx
@@ -63,12 +63,16 @@ export function NextUp({
       <div className="relative">
         <p className="eyebrow">Next to expire</p>
 
+        {/* The one thing on the page a reader is most likely to tap, and it was
+            the only clickable text here that did not answer the cursor — the
+            queued rows under it brighten, the row list brightens, and this sat
+            inert and read as a heading rather than a way in. */}
         <button
           type="button"
           onClick={() => onOpen(event.id)}
-          className="mt-2 block max-w-full text-left"
+          className="group mt-2 block max-w-full text-left"
         >
-          <h1 className="font-display text-[1.75rem] font-semibold leading-[1.15] tracking-tight">
+          <h1 className="font-display text-[1.75rem] font-semibold leading-[1.15] tracking-tight transition-colors duration-150 group-hover:text-ink-strong">
             {event.title}
           </h1>
           <p className="mt-1 text-sm" style={{ color: game.hue }}>