hanh.tonguyen/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>
<span className="flex items-center gap-2 sm:order-1 sm:shrink-0"> <span className="flex items-center gap-2 sm:order-1 sm:shrink-0">
{(isUnread || isFading) ? ( {(isUnread || isFading) ? (
<button <span
type="button" role="button"
tabIndex={0}
onClick={(e) => { onClick={(e) => {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
markReadMutation.mutate(issue.id); 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" aria-label="Mark as read"
> >
<span <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" 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} /> <PriorityIcon priority={issue.priority} />
<StatusIcon status={issue.status} /> <StatusIcon status={issue.status} />