aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix unread dot making inbox rows taller than read rows

Browse Source 
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>
This commit is contained in:
Dotta
2026-03-07 20:12:26 -06:00
parent 45473b3e72
commit 0f75c35392
1 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
ui/src/pages/Inbox.tsx
View File

@@ -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} />