diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index c3ee4dc0f..752fdf5a4 100644
--- 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
index c9082e0af..f7c2f6473 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -224,7 +224,7 @@ function HtmlWrapper({ children }: { children: React.ReactNode }) {
) : null}
-
+
diff --git a/src/styles/app.css b/src/styles/app.css
index 527a88703..5a0009c85 100644
--- 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 {