From 917afd795eb847eb080d11e55f246cf72936e529 Mon Sep 17 00:00:00 2001
From: KoalaDev <6156589+Shik3i@users.noreply.github.com>
Date: Mon, 6 Jul 2026 03:10:18 +0200
Subject: [PATCH] fix: bottom-anchor hero demo popup instead of oversizing the
 scene

Reserving the full 600px open-popup height pushed the H1 down on short
viewports. The scene now stays at 500px (below the left column height,
so it never drives the grid row) and the extension popup is anchored to
the scene bottom, growing upwards on open. Layout stays pixel-stable
when the walkthrough toggles the popup.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 website/style.css | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/website/style.css b/website/style.css
index 68df8b4..9e453d6 100644
--- a/website/style.css
+++ b/website/style.css
@@ -3475,13 +3475,14 @@ header[id] {
     container-type: inline-size;
 }
 
-/* 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). */
+/* Fixed scene height: stays below the left hero column's height so it never
+   drives the grid row, and never changes when the popup toggles (no vertical
+   jumping). The popup is bottom-anchored and simply grows upwards on open. */
 .hero-demo-scene {
     position: relative;
     width: 100%;
-    height: 600px;
+    height: 500px;
+    height: max(calc(66cqw + 78px), 500px);
 }
 
 /* While initializing, suppress all transitions so the popup can start closed
@@ -3931,7 +3932,7 @@ header[id] {
    the toolbar icon of the foreground window */
 .hero-demo-scene .extension-mockup {
     position: absolute;
-    top: 64px;
+    bottom: 0;
     right: 0;
     z-index: 5;
     width: 292px;