Keep the docs header sticky and the table of contents clear of it (#2923)

.changeset/docs-sticky-header.md

@@ -0,0 +1,5 @@
+---
+"@tabler/docs": patch
+---
+
+Fixed the docs header not staying sticky, and the table of contents sliding under it.

docs/components/DocsNavbar.astro

@@ -13,7 +13,7 @@ const changelogUrl = 'https://tabler.io/changelog'
 ---
 
 <!-- BEGIN DOCS NAVBAR -->
-<nav class="navbar navbar-expand sticky-top" aria-label="Docs">
+<nav class="navbar navbar-expand" aria-label="Docs">
   <div class="container-lg">
     <div class="d-flex align-items-center flex-fill gap-2">
       <button type="button" class="btn btn-icon btn-ghost-secondary d-lg-none" data-bs-toggle="offcanvas" data-bs-target="#docs-menu-offcanvas" aria-controls="docs-menu-offcanvas" aria-label="Open documentation menu">

docs/layouts/DocsLayout.astro

@@ -318,7 +318,7 @@ const relatedPages = await Promise.all(
 		</script>
 		<!-- END GLOBAL THEME SCRIPT -->
 		<!-- BEGIN NAVBAR  -->
-		<header role="banner">
+		<header role="banner" class="sticky-top">
 			<DocsNavbar />
 		</header>
 		<!-- END NAVBAR  -->
@@ -476,7 +476,7 @@ const relatedPages = await Promise.all(
 					</div>
 					<!-- BEGIN DOCS TOC -->
 					<div class="col-2 d-none d-xxl-block">
-						<div class="py-5 sticky-top">
+						<div class="py-5 sticky-top docs-toc-sticky">
 							<DocsToc toc={toc} editUrl={`${site.githubUrl}/edit/dev/${editFilePath}`} sourceUrl={sourcePath ? `${site.githubUrl}/blob/dev/${sourcePath}` : undefined} markdownUrl={markdownUrl} />
 						</div>
 					</div>

docs/scss/docs.scss

@@ -579,3 +579,31 @@ header > .navbar {
     }
   }
 }
+
+//
+// Sticky header
+//
+// `position: sticky` only travels inside its containing block. The docs shell
+// has no `.page` wrapper - the header is a child of `body` - and core's
+// `body { height: 100% }` makes that block exactly one viewport tall, so the
+// header would unstick after the first screen (#2332). Let the docs body grow
+// with its content instead; `.page` does the same thing for the app layouts.
+body {
+  height: auto;
+  min-height: 100%;
+}
+
+:root {
+  // Matches `$navbar-height` in core - the height of the docs navbar.
+  --docs-header-height: 3.5rem;
+}
+
+// Anchors from the table of contents would otherwise land under the header.
+html {
+  scroll-padding-top: var(--docs-header-height);
+}
+
+// The table of contents sticks too, so it has to clear the header (#2421).
+.docs-toc-sticky {
+  top: var(--docs-header-height);
+}