From 32adb4bca2827bcc74ed2ffbb4dc790a435e19b4 Mon Sep 17 00:00:00 2001 From: Damian Osipiuk Date: Fri, 26 Sep 2025 13:08:17 +0200 Subject: [PATCH] fix: add scroll-padding to accomodate for the sticky header height --- src/components/Navbar.tsx | 2 +- src/routes/__root.tsx | 2 +- src/styles/app.css | 5 +++++ 3 files changed, 7 insertions(+), 2 deletions(-) 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 {