fix: sidebar last items hidden behind header on scroll (nodejs#8852)

Fixes nodejs#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: macbook <macbook@macbook-MacBook-Pro.local>
Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

Author: 3 people

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];
   }

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