docs: stop clipping the GitHub star count in the nav overflow menu - #1429
Merged
Merged
Conversation
Between 768px and 1279px VitePress moves the social links into the nav bar's "..." overflow menu. The star count is drawn in the GitHub link's bottom padding and pulled out of flow with a negative bottom margin so it does not stretch the nav bar, but `.VPMenu` sets `overflow-y: auto`, so the menu clipped the count at its padding box and only the top few pixels were visible. Keep that bottom padding in flow inside the overflow menu so the menu grows to fit the count instead. The nav bar at >=1280px is unchanged. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Central YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Advanced Run ID: 📒 Files selected for processing (1)
Included review availability: Your plan provides up to 4 included reviews per hour; 3 remain after this review. 📝 WalkthroughWalkthroughThe VitePress theme now resets the GitHub star-count link’s bottom margin inside the overflow menu. This prevents the scrollable menu from clipping content that extends beyond its padding box. ChangesOverflow Menu Spacing
Priority: ⬇️ Low Estimated code review effort: 1 (Trivial) | ~3 minutes Change: Bug fix Merge Risk: ⚪ Minimal · up to The overflow-menu spacing adjustment is narrowly scoped and does not introduce a known production or documentation risk. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Contributor
 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
Instruction countsThe comparison never ran — an earlier step failed.
|
jdx
added a commit
to jdx/mise
that referenced
this pull request
Sep 14, 2026
## Problem Between 768px and 1279px wide, VitePress collapses the nav bar's social links into the "…" overflow menu. On mise.jdx.dev the GitHub star count disappeared entirely at those widths — the menu showed a bare GitHub icon. ## Cause VitePress renders the GitHub link twice: inline in the nav bar, and again inside the overflow menu. The badge injector used `querySelector`, so it always matched the inline link — which is `display: none` below 1280px — and appended the badge there. The menu's copy never got one. ## Fix Inject into every match, and disconnect the `MutationObserver` once each link has its badge instead of re-running on every DOM mutation the page makes for the rest of its life. This matches what hk, pitchfork, usage and mr-boxington already do. No CSS change was needed: the badge sits 8px clear of the menu's clip box, so it does not hit the clipping that [jdx/pitchfork#862](jdx/pitchfork#862), [jdx/usage#1429](jdx/usage#1429) and [jdx/pacvamp#91](jdx/pacvamp#91) fix. ## Validation Built the docs (`mise run docs:build`), served the output, and drove headless Chromium against it: - at 1000px the "…" menu now shows `★ 33.9k`, 8px clear of the menu's clip box - at 1400px the inline badge's bounding box is identical to production today (x 1299.0, y 41, 45.9×12) and the nav bar is still 64px tall - the hamburger nav screen below 768px is unaffected — it had no badge before this change either, on mise or any of the sibling sites *AI-assisted — Tool: Claude Code; model: anthropic/claude-opus-5; version: 2.1.270.* <!-- CURSOR_SUMMARY --> --- > [!NOTE] > **Low Risk** > Docs-site nav DOM injection only; no changes to app logic, auth, or data handling. > > **Overview** > Fixes missing GitHub star badges when VitePress moves social links into the nav **"…"** overflow menu (roughly 768px–1279px). > > The theme injector in `docs/.vitepress/theme/index.ts` now uses **`querySelectorAll`** so **every** mise GitHub nav link gets a `.star-count` badge (inline + overflow copy), skips work when `starsData` is empty, and treats “all links badged” as success. The **`MutationObserver`** is scoped to **`.VPNav`**, **disconnects** once badges are on all links (instead of watching `document.body` on every mutation), and is torn down in **`onUnmounted`**; the old immediate + `setTimeout(100)` retry path is removed. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit 40cbad9. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup> <!-- /CURSOR_SUMMARY --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Bug Fixes** - GitHub star count badges now appear on all matching GitHub links, including links in the overflow menu. - Badge updates now reliably handle navigation elements that load or change dynamically. - Badge monitoring stops once all applicable links are updated, improving behavior and preventing unnecessary ongoing activity. <!-- end of auto-generated comment: release notes by coderabbit.ai --> Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
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.
Problem
Between 768px and 1279px wide, VitePress collapses the nav bar's social links
into the "…" overflow menu. The GitHub star count that sits under the GitHub
icon was cut off by the menu's bottom edge on usage.jdx.dev — only the top few pixels of
★ 1kwere visible above the dropdown's rounded corner.Cause
The count is drawn inside the GitHub link's bottom padding, and a negative
margin-bottompulls that 12px strip back out of flow so the badge doesn'tstretch the nav bar. VitePress's
.VPMenusetsoverflow-y: auto, which clipsanything hanging past its padding box, so in the overflow menu the badge lost
4px of its 9.6px line.
Fix
Inside
.VPNavBarExtraonly, drop the negative margin so the padding stays inflow and the menu grows by 12px to fit the count. The nav bar at ≥1280px,
where the social links render inline, is untouched.
Validation
Ran the docs dev server and drove headless Chromium against it at 780px, 1000px
and 1270px wide, opening the "…" menu and measuring the badge against the menu's
clip box:
★ 1kfully visibleAI-assisted — Tool: Claude Code; model: anthropic/claude-opus-5; version: 2.1.270.
Note
Low Risk
Docs-only CSS scoped to the nav overflow menu; no runtime or security impact.
Overview
Fixes the GitHub star badge (
★ 1k) being cut off when social links move into the VitePress “…” overflow menu (roughly 768px–1279px).The badge sits in the link’s bottom padding while a negative
margin-bottomkeeps the main nav bar height unchanged at wide breakpoints. That out-of-flow strip gets clipped by the overflow menu’soverflow-y: auto. The PR adds a scoped override under.VPNavBarExtrathat setsmargin-bottom: 0so the padding stays in flow and the menu grows to show the full count, plus a short comment explaining the tradeoff. Inline nav at ≥1280px is unchanged.Reviewed by Cursor Bugbot for commit 191a6d5. Bugbot is set up for automated code reviews on this repo. Configure here.
Summary by CodeRabbit