docs(docs): fixing the header, making it sticky so there is no layout shift

Author: thejackshelton

apps/website/src/routes/_components/header/header.tsx

@@ -64,7 +64,7 @@ export default component$(
     return (
       <header
         class={[
-          `fixed top-0 z-20 flex h-20 w-full items-center gap-8 border-b-[1px] border-slate-200 bg-white  p-4 dark:border-slate-800 dark:bg-slate-900 md:h-20`,
+          `sticky top-0 z-20 flex h-20 w-full items-center gap-8 border-b-[1px] border-slate-200 bg-white  p-4 dark:border-slate-800 dark:bg-slate-900 md:h-20`,
           `shadow-light-low dark:shadow-dark-medium`,
           rootStore.isSidebarOpened
             ? 'bg-blue-200 brightness-75 dark:bg-indigo-900'

apps/website/src/routes/layout.tsx

@@ -27,7 +27,7 @@ export default component$(() => {
     <>
       <Header showBottomBorder={true} showVersion={true} />
       <QwikUIProvider>
-        <div class="setup-grid-areas lg:grid-cols-custom-lg 2xl:grid-cols-custom-2xl mt-20 grid">
+        <div class="setup-grid-areas lg:grid-cols-custom-lg 2xl:grid-cols-custom-2xl grid">
           <DocsNavigation linksGroups={menuItemsGroups} />
           <main class="docs [grid-area:main]">
             <Slot />

packages/kit-headless/src/components/modal/modal-behavior.ts

@@ -25,9 +25,6 @@ export function activateFocusTrap(focusTrap: FocusTrap | null) {
   }
 }
 
-/**
- * Deactivates the given FocusTrap
- */
 export function deactivateFocusTrap(focusTrap: FocusTrap | null) {
   focusTrap?.deactivate();
   focusTrap = null;
@@ -84,14 +81,14 @@ export function overrideNativeDialogEscapeBehaviorWith(continuation: () => void)
   };
 }
 
-/*
+/**
  * Adds CSS-Class to support modal-opening-animation
  */
 export function supportShowAnimation(modal: HTMLDialogElement) {
   modal.classList.add('modal-showing');
 }
 
-/*
+/**
  * Listens for animation/transition events in order to
  * remove Animation-CSS-Classes after animation/transition ended.
  */
@@ -105,14 +102,14 @@ export function supportClosingAnimation(
   const { animationDuration, transitionDuration } = getComputedStyle(modal);
 
   const runAnimationEnd = () => {
-    clearAllBodyScrollLocks();
     modal.classList.remove('modal-closing');
+    clearAllBodyScrollLocks();
     afterAnimate();
   };
 
   const runTransitionEnd = () => {
-    clearAllBodyScrollLocks();
     modal.classList.remove('modal-closing');
+    clearAllBodyScrollLocks();
     afterAnimate();
   };