From 2f8f495e9e6bffefc49f32a0e94b3f9b7d398bfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kuna?=
 <1282324+codecalm@users.noreply.github.com>
Date: Tue, 1 Sep 2026 22:29:07 +0200
Subject: [PATCH] Keep the docs header sticky and the table of contents clear
 of it (#2923)

---
 .changeset/docs-sticky-header.md |  5 +++++
 docs/components/DocsNavbar.astro |  2 +-
 docs/layouts/DocsLayout.astro    |  4 ++--
 docs/scss/docs.scss              | 28 ++++++++++++++++++++++++++++
 4 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/docs-sticky-header.md

diff --git a/.changeset/docs-sticky-header.md b/.changeset/docs-sticky-header.md
new file mode 100644
index 000000000..9332e8252
--- /dev/null
+++ b/.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.
diff --git a/docs/components/DocsNavbar.astro b/docs/components/DocsNavbar.astro
index 28f33b9e2..2adaac3a4 100644
--- a/docs/components/DocsNavbar.astro
+++ b/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">
diff --git a/docs/layouts/DocsLayout.astro b/docs/layouts/DocsLayout.astro
index c67bd11b4..551c45157 100644
--- a/docs/layouts/DocsLayout.astro
+++ b/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>
diff --git a/docs/scss/docs.scss b/docs/scss/docs.scss
index b0ff82c17..50d7506eb 100644
--- a/docs/scss/docs.scss
+++ b/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);
+}