fix(contributor-card): align card with native hovercard in dark mode#37
Merged
Conversation
The contributor card read as a separate, lighter, thicker-bordered box from GitHub's native hovercard bubble in dark mode (both invisible in light mode): - Doubled border: the card had a 1px border AND box-shadow: var(--shadow-floating-small), whose first layer is an opaque '0 0 0 1px #3d444d' ring in the exact border color. Stacked on the border, the card's edges rendered as a ~2px band, while the bubble stayed 1px (GitHub forces the bubble's box-shadow to none). Dropped the box-shadow so the 1px border is the single edge, matching the bubble. In light mode that ring is a translucent halo, hence invisible. - Surface mismatch: the card used --bgColor-default (#0d1117, page canvas) while the bubble is an overlay surface (--overlay-bgColor, #010409). Switched the card to --overlay-bgColor so the two share one surface color. Both are #fff in light mode, so no visible change there. Also removed the now-dead box-shadow from the .Popover-message override (it never applied — GitHub forces it to none). Verified live in dark mode: card bg, 1px border color, and (absent) shadow now equal the bubble's; content column and geometry already aligned to the pixel.
When GitHub opens the hovercard above the trigger, the bubble's caret sits on its bottom edge (.Popover-message--bottom*). With our card attached below the bubble, that down-pointing caret lands in the seam between the bubble and the card — a stray chevron pointing into the card. Its fill is a fixed light color, so in dark mode it reads as a bright notch (the user noticed it appearing 'on first hover' — really whenever GitHub places the card above the trigger). Our card is the popover's real bottom now, so the bubble's bottom pointer is meaningless. Hide the bottom-edge caret when our card is present. The top-edge caret (card opens below the trigger) is left intact — it points up at the trigger, clear of our card. Verified live: caret gone from the seam; specificity wins without !important.
rrbe
changed the title
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
1 participant
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.
In dark mode, the contributor card didn't read as a seamless continuation of GitHub's native hovercard bubble. Three issues, all invisible (or nearly) in light mode — which is why they went unnoticed.
1. Doubled border
The card had a
1pxborder andbox-shadow: var(--shadow-floating-small). In dark mode that token's first layer is an opaque0 0 0 1px #3d444dring in the exact border color — stacked on the border, the card's edges rendered as a ~2pxband, while the bubble stayed1px(GitHub forces.Popover-message'sbox-shadowtonone, so our override there never applied). In light mode the ring is a translucent halo, hence invisible.Fix: drop the card's
box-shadow— the1pxborder is now the single edge, identical to the bubble's. Also removed the now-deadbox-shadowfrom the.Popover-messageoverride.2. Surface (background) mismatch
The card used
--bgColor-default(#0d1117, the page canvas) instead of the popover overlay surface--overlay-bgColor(#010409) the bubble uses, so it sat a shade lighter than the bubble.Fix: card background
--bgColor-default→--overlay-bgColor. Both are#fffin light mode, so no change there.3. Stray caret in the seam
When GitHub opens the hovercard above the trigger, the bubble's caret sits on its bottom edge (
.Popover-message--bottom*). With our card attached below, that down-pointing caret lands in the seam between bubble and card — a chevron pointing into nothing. Its fill is a fixed light color, so in dark mode it's a bright notch. (Appears "on first hover" → really whenever GitHub places the card above the trigger, which depends on viewport space.)Fix: hide the bottom-edge caret when our card is present. The top-edge caret (card opens below the trigger) is left intact — it correctly points up at the trigger, clear of our card.
Verification
Reproduced and confirmed live in Chrome (dark & light):
1pxborder color, and (absent) shadow all equal the bubble's; the seam caret is gone.x=387) were already pixel-aligned with the bubble.pnpm buildpasses.