From 3fdafc14d7e96d80b5894cb9c797c7a4c9a30a68 Mon Sep 17 00:00:00 2001
From: Ruslan <rvasylkiv@thingsboard.io>
Date: Wed, 24 Jun 2026 11:19:34 +0300
Subject: [PATCH 1/2] fix(promo-banner): restore docs scroll-hide animation
 lost in merge

The pure-CSS scroll-driven hide (--promo-cur collapse via
@keyframes promo-collapse / promo-vanish under
@supports (animation-timeline: scroll())) was silently dropped from
_starlight-overrides.scss during the PR #465 merge (7e75f818e), so the
docs banner no longer collapsed on scroll. The merge also trimmed the
--promo-anim:none banner-less-page fallback from PromoBanner.astro,
leaving the degenerate 0 0px range / stale band the comment warns about.

Restore both verbatim from the last good commit (58897deb4) and drop the
now-false comment claiming the animation lives in PromoBanner.astro.

main still has this animation (it never went through the bad merge), so
landing this on develop first keeps develop->main from silently deleting
it on main.
---
 src/components/PromoBanner.astro     |  2 +-
 src/styles/_starlight-overrides.scss | 38 ++++++++++++++++++++++++++--
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/components/PromoBanner.astro b/src/components/PromoBanner.astro
index 929aca261..669eadd55 100644
--- a/src/components/PromoBanner.astro
+++ b/src/components/PromoBanner.astro
@@ -117,7 +117,7 @@ const hasSwitcher = slides.length > 1;
 }
 {
 	/* No slide to show (e.g. all targets matched the current page): zero --promo-h. */
-	!showBanner && <style is:inline set:html=":root{--promo-h:0px}" />
+	!showBanner && <style is:inline set:html=":root{--promo-h:0px;--promo-anim:none}" />
 }
 
 <script>
diff --git a/src/styles/_starlight-overrides.scss b/src/styles/_starlight-overrides.scss
index eedc6090c..aafed3d6a 100644
--- a/src/styles/_starlight-overrides.scss
+++ b/src/styles/_starlight-overrides.scss
@@ -15,12 +15,46 @@
 // Content offset uses the CONSTANT banner height (not --promo-cur) so the page
 // never jumps when the banner hides — by then content has scrolled behind the
 // header, leaving no gap. Unlayered → beats Starlight's @layer core rule.
-// (The scroll-collapse animation that drives --promo-cur lives in
-// PromoBanner.astro, co-located with the banner.)
 .main-frame {
 	padding-top: calc(#{$header-height} + var(--promo-h, 0px) + var(--sl-mobile-toc-height, 0px));
 }
 
+// Promo banner hide-on-scroll, pure CSS: scroll collapses --promo-cur over the
+// banner's height, so header/sidebar/TOC lift proportionally. Unsupported
+// browsers keep --promo-cur = --promo-h → banner stays pinned (graceful).
+@keyframes promo-collapse {
+	from {
+		--promo-cur: var(--promo-h, 0px);
+	}
+	to {
+		--promo-cur: 0px;
+	}
+}
+@keyframes promo-vanish {
+	0%,
+	99% {
+		visibility: visible;
+	}
+	to {
+		visibility: hidden; // drop the off-screen banner from tab order
+	}
+}
+@supports (animation-timeline: scroll()) {
+	:root {
+		// `--promo-anim` lets a banner-less page (the campaign's own target page,
+		// which sets --promo-h:0) switch the collapse OFF — otherwise the range
+		// `0 0px` is degenerate and leaves --promo-cur indeterminate (stale band).
+		animation: var(--promo-anim, promo-collapse) linear both;
+		animation-timeline: scroll(root);
+		animation-range: 0 var(--promo-h, 0px);
+	}
+	#promo-banner {
+		animation: promo-vanish linear both;
+		animation-timeline: scroll(root);
+		animation-range: 0 var(--promo-h, 0px);
+	}
+}
+
 // Bump Starlight's content padding from 1.5rem → 2rem at the same breakpoint
 // where Starlight switches to its desktop layout (>= 72rem). The 1.5rem
 // default leaves the page heading visually flush against the left sidebar

From 3ba81e5faac8a2d76a701766ef90aefe5ea9e9d9 Mon Sep 17 00:00:00 2001
From: Ruslan <rvasylkiv@thingsboard.io>
Date: Wed, 24 Jun 2026 12:02:03 +0300
Subject: [PATCH 2/2] fix(promo-banner): keep banner visible under open burger
 menu
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The shared-header refactor (#465) moved #promo-banner inside Starlight's
header.header wrapper on marketing too (it used to be a sibling), so the
`header.header.opened-burger #promo-banner { display: none }` rule — added
in #449 for the old docs-only layout — now fired on marketing as well.
Opening the burger at the top of the page hid the banner but left the
drawer at its --promo-cur offset, leaving an empty ~40px band above the
menu (and a jump).

Drop the display:none rule. The drawer already anchors at top:--promo-cur,
below the banner, so the banner just stays visible above the open menu (no
jump, no band). When scrolled on docs the banner has already collapsed
off-screen via --promo-cur, so the drawer reaches top:0 with nothing over
it. The #449 "covers the close button" concern is obsolete: the drawer and
its X now sit below the banner, not under it.
---
 src/components/Landing/HeaderContent.astro | 3 ++-
 src/components/PromoBanner.astro           | 6 ------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/Landing/HeaderContent.astro b/src/components/Landing/HeaderContent.astro
index 13bd9cd3d..a3bdc61d1 100644
--- a/src/components/Landing/HeaderContent.astro
+++ b/src/components/Landing/HeaderContent.astro
@@ -382,7 +382,8 @@ const needsScrollState = variant === 'transparent' || variant === 'transparent-h
 			&.opened-burger {
 				// Anchor the drawer where the bar already sits (top stays at --promo-cur,
 				// below the banner) and fill to the viewport bottom, so opening at the top
-				// shifts nothing. The banner stays visible above the drawer.
+				// shifts nothing. The banner stays visible above the drawer (when scrolled
+				// it has already collapsed off-screen, so the drawer reaches top:0).
 				bottom: 0;
 				z-index: 10000;
 				display: flex !important;
diff --git a/src/components/PromoBanner.astro b/src/components/PromoBanner.astro
index 669eadd55..0a1ae80a8 100644
--- a/src/components/PromoBanner.astro
+++ b/src/components/PromoBanner.astro
@@ -456,12 +456,6 @@ const hasSwitcher = slides.length > 1;
 		position: static;
 	}
 
-	// Docs: banner is inside the header wrapper, so the open full-screen mobile menu
-	// would cover it — hide it. (Marketing: banner is a sibling, never matches.)
-	header.header.opened-burger #promo-banner {
-		display: none;
-	}
-
 	// Mobile: badge stays left, message wraps beside it; taller bar.
 	@include media-down(md) {
 		:root {