From 0f75c35392190e5c90b30e95c90fe96386be8128 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Sat, 7 Mar 2026 20:12:26 -0600
Subject: [PATCH] Fix unread dot making inbox rows taller than read rows

Replace <button> with <span role="button"> for the unread dot to
eliminate browser UA button styles (min-height, padding) that caused
unread rows to be taller despite explicit h-4 constraint. Also
reduce dot from h-2.5/w-2.5 to h-2/w-2 for a more subtle indicator.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 ui/src/pages/Inbox.tsx | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/ui/src/pages/Inbox.tsx b/ui/src/pages/Inbox.tsx
index 8b8a52b5..66fe71c4 100644
--- a/ui/src/pages/Inbox.tsx
+++ b/ui/src/pages/Inbox.tsx
@@ -907,24 +907,32 @@ export function Inbox() {
                     </span>
                     <span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
                       {(isUnread || isFading) ? (
-                        <button
-                          type="button"
+                        <span
+                          role="button"
+                          tabIndex={0}
                           onClick={(e) => {
                             e.preventDefault();
                             e.stopPropagation();
                             markReadMutation.mutate(issue.id);
                           }}
-                          className="group/dot flex h-4 w-4 shrink-0 items-center justify-center rounded-full transition-colors hover:bg-blue-500/20"
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              markReadMutation.mutate(issue.id);
+                            }
+                          }}
+                          className="inline-flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-blue-500/20"
                           aria-label="Mark as read"
                         >
                           <span
-                            className={`h-2.5 w-2.5 rounded-full bg-blue-600 dark:bg-blue-400 transition-opacity duration-300 ${
+                            className={`h-2 w-2 rounded-full bg-blue-600 dark:bg-blue-400 transition-opacity duration-300 ${
                               isFading ? "opacity-0" : "opacity-100"
                             }`}
                           />
-                        </button>
+                        </span>
                       ) : (
-                        <span className="h-4 w-4 shrink-0" />
+                        <span className="inline-flex h-4 w-4 shrink-0" />
                       )}
                       <PriorityIcon priority={issue.priority} />
                       <StatusIcon status={issue.status} />