songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Force the scrollbar to always be visible to prevent layout shifts

Browse Source
This commit is contained in:
javayhu 2025-03-08 23:29:06 +08:00
parent 12b33b29ce
commit 19d6eef747
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/layout/navbar.tsx
View File

@ -102,9 +102,12 @@ export function Navbar({ scroll }: NavBarProps) {
? 'noopener noreferrer'
: undefined
}
className="group flex select-none flex-row items-center gap-4 rounded-md p-2 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
className="group flex select-none flex-row items-center gap-4 rounded-md
p-2 leading-none no-underline outline-none transition-colors
hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground"
>
<div className="flex size-8 shrink-0 items-center justify-center text-muted-foreground group-hover:text-primary">
<div className="flex size-8 shrink-0 items-center justify-center
text-muted-foreground group-hover:text-primary">
{subItem.icon ? subItem.icon : null}
</div>
<div className="flex-1">
@ -118,7 +121,8 @@ export function Navbar({ scroll }: NavBarProps) {
)}
</div>
{subItem.external && (
<ArrowUpRightIcon className="size-4 shrink-0 text-muted-foreground hover:text-primary-foreground" />
<ArrowUpRightIcon className="size-4 shrink-0
text-muted-foreground hover:text-primary-foreground" />
)}
</LocaleLink>
</NavigationMenuLink>

2
src/styles/globals.css
View File

@ -53,6 +53,8 @@
html {
/* prevent the layout from shifting when the scrollbar appears or disappears. */
scrollbar-gutter: stable;
/* Force the scrollbar to always be visible to prevent layout shifts */
overflow-y: scroll;
}
* {