From d6f5bac7f268d8eec51937f9e1832fd8d5b32a78 Mon Sep 17 00:00:00 2001 From: shawn Date: Wed, 24 Jun 2026 00:16:20 +0800 Subject: [PATCH 1/2] fix(contributor-card): match native bubble border/bg in dark mode MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- src/styles/content.css | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/src/styles/content.css b/src/styles/content.css index 4657723..767a087 100644 --- a/src/styles/content.css +++ b/src/styles/content.css @@ -838,29 +838,32 @@ a.better-github-review-popover-item:hover { padding: 10px 16px 12px; font-size: 12px; line-height: 1.5; - background: var(--bgColor-default, var(--color-canvas-default, #fff)); + /* Match the popover SURFACE, not the page canvas. GitHub's hovercard bubble is + an overlay (--overlay-bgColor, #010409 in dark) — darker than the canvas + (--bgColor-default, #0d1117). Using the canvas made the card a lighter shade + than the bubble in dark mode; the two read as one card only on a shared + surface color. (Both are #fff in light, which is why the gap was invisible + there.) */ + background: var(--overlay-bgColor, var(--color-canvas-overlay, #fff)); + /* The 1px border is the card's ONLY edge, so it lines up with the bubble's 1px + border. No box-shadow: GitHub's hovercard casts none in dark mode, and the + --shadow-floating-small token bundles an OPAQUE `0 0 0 1px` border-colored + ring — stacked on this border it rendered the card's edges as a doubled ~2px + border (visible only in dark, where the ring is opaque #3d444d; in light it's + a translucent halo). Border-only keeps our edge identical to the bubble's. */ border: 1px solid var(--borderColor-default, var(--color-border-default, #d0d7de)); border-radius: 0 0 6px 6px; - box-shadow: var( - --shadow-floating-small, - 0 1px 3px rgba(31, 35, 40, 0.12), - 0 8px 24px rgba(66, 74, 83, 0.12) - ); } /* Merge the seam: when our card is attached, drop GitHub's bubble bottom border + - rounding so it flows straight into our section, and give the bubble the same - soft shadow so the whole stack casts one shadow. Scoped to when our card is - present, so GitHub's hovercard is untouched otherwise. */ + rounding so the bubble flows straight into our section — the card's top border + becomes the single divider. Scoped to when our card is present, so GitHub's + hovercard is untouched otherwise. (No box-shadow here: GitHub's hovercard has + none in dark mode, and the card matches with a plain border — see above.) */ .js-hovercard-content:has(.better-github-contributor-card) .Popover-message { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; - box-shadow: var( - --shadow-floating-small, - 0 1px 3px rgba(31, 35, 40, 0.12), - 0 8px 24px rgba(66, 74, 83, 0.12) - ); } /* Eyebrow: a small accent mark + wordmark that flags the section as ours From 26e7aff7c6ac265b7ce44e11e7c6b6550f51a562 Mon Sep 17 00:00:00 2001 From: shawn Date: Wed, 24 Jun 2026 00:24:55 +0800 Subject: [PATCH 2/2] fix(contributor-card): hide hovercard caret that lands in the card seam MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- src/styles/content.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/styles/content.css b/src/styles/content.css index 767a087..23265fd 100644 --- a/src/styles/content.css +++ b/src/styles/content.css @@ -866,6 +866,18 @@ a.better-github-review-popover-item:hover { border-bottom-right-radius: 0; } +/* GitHub points the hovercard at its trigger with a caret on the bubble's edge. + When it opens ABOVE the trigger, the caret is on the bubble's BOTTOM edge + (.Popover-message--bottom*) — and with our card attached below, it lands in the + seam as a stray chevron pointing into the card (its fill is a fixed light color, + so in dark mode it's a bright notch). Our card is the popover's real bottom now, + so that pointer is meaningless here — hide it. The top-edge caret (bubble opens + below the trigger) is left alone: it points up at the trigger, clear of the card. */ +.js-hovercard-content:has(.better-github-contributor-card) [class*="Popover-message--bottom"]::before, +.js-hovercard-content:has(.better-github-contributor-card) [class*="Popover-message--bottom"]::after { + display: none; +} + /* Eyebrow: a small accent mark + wordmark that flags the section as ours without shouting — keeps the merge seamless while giving it an identity. */ .better-github-contributor-card-header {