From 473584ea8fc68170c0e548bfc59734e43bf98184 Mon Sep 17 00:00:00 2001 From: macbook Date: Mon, 27 Apr 2026 16:44:54 +0300 Subject: [PATCH] fix: sidebar last items hidden behind header on scroll Fixes nodejs/nodejs.org#8521 The sidebar container was using `h-svh` (100svh) with `top-0`, making it exactly viewport height but starting from the top where the header overlaps. This caused the last sidebar items to be clipped when scrolled down. Changes: - Set sidebar top to `var(--header-height)` to position it below the header - Set sidebar height to `calc(100svh - var(--header-height))` to account for the header's vertical space - Removed unnecessary `pb-[var(--header-height)]` padding from sidebar wrapper since the container now correctly sizes itself Co-Authored-By: Claude Opus 4.7 --- .../ui-components/src/Containers/Article/index.module.css | 4 ++-- .../ui-components/src/Containers/Sidebar/index.module.css | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/ui-components/src/Containers/Article/index.module.css b/packages/ui-components/src/Containers/Article/index.module.css index 8d3dccdfd9a8f..f2df1c4400b0e 100644 --- a/packages/ui-components/src/Containers/Article/index.module.css +++ b/packages/ui-components/src/Containers/Article/index.module.css @@ -17,8 +17,8 @@ > *:nth-child(1) { @apply ml:sticky - ml:top-0 - ml:h-svh + ml:top-[var(--header-height)] + ml:h-[calc(100svh-var(--header-height))] ml:overflow-y-auto [grid-area:sidebar]; } diff --git a/packages/ui-components/src/Containers/Sidebar/index.module.css b/packages/ui-components/src/Containers/Sidebar/index.module.css index a56bed69bf94b..b9a5c3595664d 100644 --- a/packages/ui-components/src/Containers/Sidebar/index.module.css +++ b/packages/ui-components/src/Containers/Sidebar/index.module.css @@ -5,7 +5,6 @@ ml:overflow-auto ml:border-r scrollbar-thin - ml:pb-[var(--header-height)] z-0 flex w-full