From da681e9e3fe588c040148d19079b32adb4b35b32 Mon Sep 17 00:00:00 2001 From: KoalaDev <6156589+Shik3i@users.noreply.github.com> Date: Sun, 5 Jul 2026 21:56:37 +0200 Subject: [PATCH] fix: reserve open-popup height for hero demo scene The scene animated its own height when the walkthrough toggled the extension popup; with the vertically centered hero grid this re-centered the left column and shifted everything below on mid-size screens. The scene now always reserves the 600px open state, so toggling the popup never reflows the page. Co-Authored-By: Claude Fable 5 --- website/style.css | 12 +++--------- 1 file changed, 3 insertions(+), 9 deletions(-) diff --git a/website/style.css b/website/style.css index bebbc7c..68df8b4 100644 --- a/website/style.css +++ b/website/style.css @@ -3475,18 +3475,12 @@ header[id] { container-type: inline-size; } -/* The scene is sized for the two cascading tab cards; opening the popup - grows it. (Without JS the popup-open class is set in the markup, so the - static fallback always has room for the popup.) */ +/* The scene always reserves the height of the open-popup state, so the + walkthrough toggling the popup never changes layout height (no vertical + jumping of the hero or the content below). */ .hero-demo-scene { position: relative; width: 100%; - height: 390px; - height: calc(66cqw + 78px); - transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1); -} - -.hero-demo-scene.popup-open { height: 600px; }