Fix gap in theme picker to header positioning

Author: webstackdev

src/components/Header/client/index.ts

@@ -6,6 +6,7 @@
 import { handleScriptError } from '@components/scripts/errors/handler'
 import { isType1Element } from '@components/scripts/assertions/elements'
 import { updateLayoutOffsets } from '@components/scripts/store'
+import { getScrollViewportElement } from '@components/scripts/store/selectors'
 import { animateCollapse, animateExpand, isHeaderAnimating } from './headerAnimation'
 import { getHeaderElement, getHeaderShellElement } from './selectors'
 
@@ -61,14 +62,17 @@ const hasScrollTop = (element: unknown): element is HTMLElement => {
 }
 
 // Use the event target when scrolling happens inside a container.
+// Also checks #scroll-viewport for cases where no event is available (e.g. resize).
 const getScrollTop = (event?: Event): number => {
   const target = event?.target
   const targetScrollTop =
     hasScrollTop(target) ? target.scrollTop : 0
   const documentScrollTop = getDocumentScrollTop()
   const windowScrollTop = typeof window.scrollY === 'number' ? window.scrollY : 0
+  const viewport = getScrollViewportElement()
+  const viewportScrollTop = viewport ? viewport.scrollTop : 0
 
-  return Math.max(targetScrollTop, documentScrollTop, windowScrollTop)
+  return Math.max(targetScrollTop, documentScrollTop, windowScrollTop, viewportScrollTop)
 }
 
 const shouldForceExpanded = (header: HTMLElement): boolean => {

src/components/Header/index.css

@@ -53,6 +53,7 @@
   --header-brand-scale-current: var(--header-brand-scale);
   --header-nav-font-size-current: var(--header-nav-font-size);
 
+  flex-shrink: 0;
   position: relative;
 }
 

src/components/Layout/Container/index.astro

@@ -10,7 +10,7 @@ const { id } = Astro.props
 ---
 
 <div
-  class="flex flex-col min-h-screen relative transition-transform duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]
+  class="flex flex-col flex-1 min-h-0 overflow-hidden relative transition-transform duration-300 ease-[cubic-bezier(0.25,0.46,0.45,0.94)]
     [&_#header]:mx-auto [&_#header]:max-w-300 [&_#header]:w-[90%]
     [&_#main]:mx-auto [&_#main]:max-w-300 [&_#main]:w-[90%]
     [&_#breadcrumbs]:mx-auto [&_#breadcrumbs]:max-w-300 [&_#breadcrumbs]:w-[90%]

src/components/Layout/Content/index.astro

@@ -6,7 +6,7 @@
 
 <main
   id="main"
-  class="flex flex-col flex-[0_1_auto]"
+  class="flex flex-col flex-1"
   role="main"
   tabindex="-1"
 >

src/components/Pages/Contact/index.astro

@@ -406,7 +406,7 @@ const { content, prefilledProjectType = '' } = Astro.props
             {/** Contact Information */}
             <div
               class="bg-content-inverse p-6 md:p-8 rounded-2xl shadow-lg h-fit sticky"
-              style="top: calc(var(--layout-top-offset, 0px) + 1rem);"
+              style="top: 1rem;"
             >
               <div class="space-y-8">
                 <div>

src/components/ThemePicker/client/index.ts

@@ -724,6 +724,14 @@ export class ThemePickerElement extends LitElement {
         requestAnimationFrame(() => {
           this.pickerModal.classList.add(CLASSES.isOpen)
           updateLayoutOffsets()
+
+          // Re-measure after the max-height transition completes so the
+          // offset is perfectly accurate once the panel settles.
+          this.pickerModal.addEventListener(
+            'transitionend',
+            () => updateLayoutOffsets(),
+            { once: true },
+          )
         })
       } else {
         this.pickerModal.classList.add(CLASSES.isOpen)

src/components/ThemePicker/themePicker.module.css

@@ -1,6 +1,7 @@
 /* Reserve layout space for the theme picker when open. */
 :global(theme-picker) {
   display: block;
+  flex-shrink: 0;
   height: var(--theme-picker-offset, 0);
   position: relative;
   z-index: var(--z-theme-picker);

src/components/Toc/index.astro

@@ -22,9 +22,9 @@ const tocTree = buildTocTree(items)
           data-toc-toggle
           aria-controls="toc-drawer"
           aria-label="Open table of contents"
-          class="fixed right-0 top-1/2 -translate-y-1/2 z-(--z-content-floating) flex h-16 w-9 items-center justify-center rounded-l-full border border-r-0 border-trim bg-page-base shadow-elevated transition-opacity hover:shadow-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary lg:hidden"
+          class="fixed right-0 top-1/2 -translate-y-1/2 z-(--z-content-floating) flex h-16 w-9 items-center justify-center rounded-l-full border border-r-0 border-trim bg-page-base transition-opacity hover:shadow-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary md:hidden"
         >
-          <Icon icon="arrow-left" size={18} />
+          <Icon icon="arrow-left" size={6} />
         </button>
 
         {/* Full-screen scrim overlay */}
@@ -33,7 +33,7 @@ const tocTree = buildTocTree(items)
           data-toc-overlay
           data-visible="false"
           aria-label="Close table of contents"
-          class="fixed inset-0 z-(--z-content-scrim) bg-surface/80 opacity-0 backdrop-blur-sm pointer-events-none transition-opacity duration-300 data-[visible=true]:opacity-100 data-[visible=true]:pointer-events-auto lg:hidden"
+          class="fixed inset-0 z-(--z-content-scrim) bg-surface/80 opacity-0 backdrop-blur-sm pointer-events-none transition-opacity duration-300 data-[visible=true]:opacity-100 data-[visible=true]:pointer-events-auto md:hidden"
         ></button>
 
         {/* Right-side drawer panel */}
@@ -58,7 +58,7 @@ const tocTree = buildTocTree(items)
 
           <aside
             class="px-5 py-6 lg:sticky lg:rounded-lg lg:border lg:border-trim lg:bg-page-base lg:shadow-none"
-            style="top: calc(var(--layout-top-offset, 0px) + 1rem);"
+            style="top: 1rem;"
             aria-labelledby="toc-heading"
           >
             {/* Desktop heading — hidden on mobile where the drawer header shows instead */}

src/components/scripts/store/layoutPosition.ts

@@ -89,15 +89,25 @@ function measureThemePickerHeight(): number {
   const modal = getThemePickerModalElement()
   if (!modal || !modal.classList.contains(IS_OPEN_CLASS)) return 0
 
+  // Prefer the live rendered height (accurate once the CSS transition ends).
   const rect = modal.getBoundingClientRect()
   if (rect.height > 0) return rect.height
 
-  // Fallback: compute the CSS 14em target when mid-transition
-  const computed = window.getComputedStyle(modal)
-  const maxH = Number.parseFloat(computed.maxHeight)
-  if (Number.isFinite(maxH) && maxH > 0) return maxH
+  // During the opening frame the max-height transition starts at 0, so
+  // getBoundingClientRect().height is 0. scrollHeight gives the intrinsic
+  // content height regardless of max-height / overflow constraints. We cap
+  // it at the CSS target max-height (14em) so we never overshoot.
+  const scrollH = modal.scrollHeight
+  if (scrollH > 0) {
+    const modalFontSize =
+      Number.parseFloat(getComputedStyle(modal).fontSize) ||
+      Number.parseFloat(getComputedStyle(document.documentElement).fontSize) ||
+      16
+    const maxTargetHeight = 14 * modalFontSize
+    return Math.min(scrollH, maxTargetHeight)
+  }
 
-  // Last resort
+  // Last resort: the CSS 14em target.
   const fontSize = Number.parseFloat(
     getComputedStyle(document.documentElement).fontSize,
   ) || 16

src/components/scripts/store/selectors.ts

@@ -2,13 +2,15 @@
  * Type-safe HTML element selectors for the layout position store.
  *
  * These selectors are used by the layout measurement functions to find
- * the ThemePicker modal, the fixed header, and the progress bar.
+ * the ThemePicker modal, the fixed header, the progress bar, and the
+ * scroll viewport container.
  */
 
 export const LAYOUT_SELECTORS = {
   themePickerModal: '[data-theme-modal]',
   headerFixed: '.header-fixed',
   progressBar: '[data-progress-bar]',
+  scrollViewport: '#scroll-viewport',
 } as const
 
 /**
@@ -31,3 +33,10 @@ export function getHeaderFixedElement(): HTMLElement | null {
 export function getProgressBarElement(): HTMLElement | null {
   return document.querySelector<HTMLElement>(LAYOUT_SELECTORS.progressBar)
 }
+
+/**
+ * Query the scroll viewport container.
+ */
+export function getScrollViewportElement(): HTMLElement | null {
+  return document.querySelector<HTMLElement>(LAYOUT_SELECTORS.scrollViewport)
+}