authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-06-04 14:31:24-07:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-06-04 14:31:24-07:00
logb0fa60a121bd55f88c2432b1e29ec694c3d76863
tree5fb91e3cdb2aaac8151c58d460218c413cf59b58
parent348a9140e9d352fdcb1779d467b4b68000b61bdf
signature Signed by PGP key B5690EEEBB952194

Prevent settings layout shifts with scrollbar gutters (#2960)

2 files changed, 2 insertions(+), 2 deletions(-)

apps/web/src/components/settings/settingsLayout.tsx+1-1
...@@ -127,7 +127,7 @@ export function SettingsPageContainer({...@@ -127,7 +127,7 @@ export function SettingsPageContainer({
127 className?: string;127 className?: string;
128}) {128}) {
129 return (129 return (
130 <div className="flex-1 overflow-y-auto p-6 sm:p-8">130 <div className="scrollbar-gutter-both flex-1 overflow-y-auto p-6 sm:p-8">
131 <div className={cn("mx-auto flex w-full max-w-3xl flex-col gap-8", className)}>131 <div className={cn("mx-auto flex w-full max-w-3xl flex-col gap-8", className)}>
132 {children}132 {children}
133 </div>133 </div>
apps/web/src/components/ui/scroll-area.tsx+1-1
...@@ -29,7 +29,7 @@ function ScrollArea({...@@ -29,7 +29,7 @@ function ScrollArea({
29 chainVerticalScroll && "overscroll-y-auto",29 chainVerticalScroll && "overscroll-y-auto",
30 scrollFade &&30 scrollFade &&
31 "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",31 "mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]",
32 scrollbarGutter && "[scrollbar-gutter:stable]",32 scrollbarGutter && "scrollbar-gutter-stable",
33 hideScrollbars &&33 hideScrollbars &&
34 "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",34 "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
35 )}35 )}