fix: add scroll-padding to accomodate for the sticky header height

DamianOsipiuk · DamianOsipiuk · commit 32adb4bca282 · 2025-09-26T13:21:31.000+02:00
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -48,7 +48,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {
     const updateContainerHeight = () => {
       if (containerRef.current) {
         const height = containerRef.current.offsetHeight
-        document.body.style.setProperty('--navbar-height', `${height}px`)
+        document.documentElement.style.setProperty('--navbar-height', `${height}px`)
       }
     }
 
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
@@ -224,7 +224,7 @@ function HtmlWrapper({ children }: { children: React.ReactNode }) {
         ) : null}
         <GamScripts />
       </head>
-      <body style={{ '--navbar-height': '48px' } as any}>
+      <body>
         <ToastProvider>
           <BackgroundGradient />
           <React.Suspense fallback={null}>
diff --git a/src/styles/app.css b/src/styles/app.css
@@ -53,6 +53,11 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentcolor);
   }
+
+  :root {
+    --navbar-height: 50px;
+    scroll-padding-top: var(--navbar-height);
+  }
 }
 
 button {

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ export function Navbar({ children }: { children: React.ReactNode }) {`
`48`	`48`	`const updateContainerHeight = () => {`
`49`	`49`	`if (containerRef.current) {`
`50`	`50`	`const height = containerRef.current.offsetHeight`
`51`		- document.body.style.setProperty('--navbar-height', `${height}px`)
	`51`	+ document.documentElement.style.setProperty('--navbar-height', `${height}px`)
`52`	`52`	`}`
`53`	`53`	`}`
`54`	`54`
Original file line number	Diff line number	Diff line change
`@@ -53,6 +53,11 @@`
`53`	`53`	`::file-selector-button {`
`54`	`54`	`border-color: var(--color-gray-200, currentcolor);`
`55`	`55`	`}`
	`56`	`+`
	`57`	`+ :root {`
	`58`	`+ --navbar-height: 50px;`
	`59`	`+ scroll-padding-top: var(--navbar-height);`
	`60`	`+ }`
`56`	`61`	`}`
`57`	`62`
`58`	`63`	`button {`