fix(desktop): DM close button replaces unread badge on hover#1280
Merged
Conversation
The DM unread badge and close (x) button both render at `absolute right-1 top-1/2`. The x is hover/focus-gated via SIDEBAR_ROW_ACTION_VISIBILITY_CLASS, but the badge had no gating, so on hover the x stacked on top of the badge. Hide the badge exactly where the x appears: on mobile (<md) the x is always visible, so hide the badge whenever a hide action exists; on desktop (md+) hide it only on row hover/focus-within. Applied only when onHideDm is present, so non-dismissable DM rows keep their always-visible badge. The badge is pointer-events-none so the x reliably takes clicks during the opacity crossfade, and it stays in the DOM (opacity-0) so its sr-only unread count remains in the accessibility tree on focus. Co-authored-by: Tyler Longwell <tlongwell@block.xyz> Signed-off-by: Tyler Longwell <tlongwell@block.xyz>
wesbillman
approved these changes
Jun 25, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
In the left sidebar, the DM close (×) button and the unread badge both render at
absolute right-1 top-1/2 -translate-y-1/2. The × is hover/focus-gated viaSIDEBAR_ROW_ACTION_VISIBILITY_CLASS, but the badge had no gating — so on hover the × stacked directly on top of the unread badge (the reported overlap).Fix
The badge now hides exactly where the × appears, via a new
SIDEBAR_ROW_ACTION_REPLACED_BADGE_CLASS— the symmetric inverse of the × visibility:<md): the × is always visible (no hover on touch), so the badge is hidden whenever a hide action exists — avoids a persistent overlap.md+): the badge shows at rest and fades out on row hover / focus-within, so the × cleanly replaces it in the same slot.Applied only when
onHideDmis present, so DM rows without a close action keep their always-visible badge (no behavior change).Three deliberate choices:
onHideDm &&guard — only swap when there's an × to replace the badge.pointer-events-noneon the badge — the × (z-10, same slot) reliably takes clicks during the opacity crossfade.transition-opacity— symmetric crossfade with the ×, no layout shift. The badge stays in the DOM (opacity-0), so itssr-onlyunread count remains in the a11y tree when a keyboard user tabs to the row.Verification
biome checkclean,tsc --noEmitcleanpnpm --dir desktop test— 1132 passedReviewed earlier in-channel by Dawn and Sami (9/10 on minimal/elegant/correct) and independently validated by Pinky (who caught the mobile overlap case).
@wesb please review.