External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(docs): keep the nav within the viewport on tablets and laptops (#570)

Browse Source 
The custom nav cluster (theme toggle + Fund + GitHub Star) rendered inline at
every width, overriding VitePress's responsive collapse: a horizontal scrollbar
at 768-959px and off-screen clipping of the buttons on 1280-1366px laptops.

Show the custom cluster only at >=1440px where it fits, defer to VitePress's
native nav below that, anchor the flyout menu to the start edge in RTL, and drop
the redundant "Home" nav link so the nav fits at 768px.

Closes #556
This commit is contained in:
SnapOtter
2026-07-18 12:27:00 +08:00
committed by GitHub
parent e3a01b6be6
commit 69f72a6c71
3 changed files with 68 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/docs/.vitepress/theme/github-stars.css
+36 -23
View File
@@ -1,19 +1,40 @@
/* Hide the three-dots extra menu - its contents are now in the navbar directly */
.VPNavBarExtra {
display: none !important;
}
/* Also hide the default appearance toggle since we render our own */
.VPNavBarAppearance {
display: none !important;
}
/* Right side of navbar: toggle + GitHub button */
/* Right-side custom nav cluster: our own appearance toggle + Fund + GitHub Star.
VitePress's default theme collapses appearance/social/translations into a
compact three-dots flyout below 1280px and shows them inline at >=1280px, so
the stock nav never overflows. Our cluster is wider than that native inline
set, so forcing it inline at every width pushed the nav past the viewport: a
horizontal page scrollbar in the 768-959px band (the nav is in normal flow
there) and off-screen clipping of the buttons on 1280-1366px laptops (the nav
is position:fixed at >=960px, so it clips instead of scrolling). Fix: show our
cluster only once the layout reaches its max width (1440px), where it fits, and
defer to VitePress's native responsive nav below that (three-dots flyout under
1280px, inline appearance + social from 1280-1439px). */
.nav-bar-right {
display: flex;
align-items: center;
gap: 12px;
margin-left: 16px;
display: none;
}
@media (min-width: 1440px) {
.nav-bar-right {
display: flex;
align-items: center;
gap: 12px;
margin-left: 16px;
}
/* Our cluster carries the appearance toggle at this width, so hide VitePress's
own inline toggle to avoid a duplicate. */
.VPNavBarAppearance {
display: none !important;
}
}
/* VitePress anchors flyout dropdowns with a physical `right: 0`, which does not
flip for RTL. In RTL the three-dots menu then opens off-screen to the left and
adds horizontal overflow even while closed (it is position:absolute). Anchor it
to the start edge so it opens inward instead. */
:root[dir="rtl"] .VPNavBarExtra .menu {
right: auto;
left: 0;
}
/* GitHub button group */
@@ -118,11 +139,3 @@
background: rgba(244, 114, 182, 0.15);
border-color: rgba(244, 114, 182, 0.4);
}
/* Hide stars and fund button on small screens, keep toggle */
@media (max-width: 640px) {
.github-btn-wrapper,
.fund-btn {
display: none;
}
}