From 11cd7410f19eac2c7253bacf72012fe71dd93f98 Mon Sep 17 00:00:00 2001
From: Timothee Guerin <tiguerin@microsoft.com>
Date: Tue, 28 Jul 2026 14:45:17 -0400
Subject: [PATCH] fix(website): prevent playground page from overflowing the
 viewport

The playground container hard-coded its height as `calc(100vh - var(--header-height))`. Since #11292 made the header `position: sticky` (in flow) with a `min-height` navbar, the real rendered header is 54px while `--header-height` is 50px, so the page overflowed by ~4px and showed a vertical scrollbar.

Make `.main` a flex column in the base layout and let the playground fill the remaining space via `flex: 1`, so it tracks the actual header height. Layout-neutral for other pages.
---
 website/src/layouts/base-layout.astro |  6 ++++++
 website/src/pages/playground.astro    | 18 +++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/website/src/layouts/base-layout.astro b/website/src/layouts/base-layout.astro
index f61eaf53dec..fa856774c58 100644
--- a/website/src/layouts/base-layout.astro
+++ b/website/src/layouts/base-layout.astro
@@ -73,6 +73,12 @@ const initJsIntegrity = computeSriHash("1ds-init.js");
 
     .main {
       flex: 1;
+      /* Lay out page content as a column so pages can opt into filling the
+         available height (e.g. the playground) via `flex: 1` on their content,
+         rather than hard-coding `100vh - var(--header-height)`, which does not
+         account for the real rendered header height. */
+      display: flex;
+      flex-direction: column;
       background-color: var(--colorNeutralBackground1);
     }
 
diff --git a/website/src/pages/playground.astro b/website/src/pages/playground.astro
index 3035f1eca7f..407b17b2a02 100644
--- a/website/src/pages/playground.astro
+++ b/website/src/pages/playground.astro
@@ -20,9 +20,25 @@ const latestVersion = versions[0];
   })}
 />
 <BaseLayout footer={false}>
-  <div style={{ height: "calc(100vh - var(--header-height))", width: "100%" }}>
+  <div class="playground-container">
     <AsyncPlayground client:only="react" latestVersion={latestVersion}>
       <LoadingSpinner slot="fallback" message="Loading playground..." />
     </AsyncPlayground>
   </div>
 </BaseLayout>
+
+<style>
+  /* Fill the remaining height provided by the base layout's `.main` flex column
+     instead of subtracting a fixed `--header-height`, which is smaller than the
+     real rendered header and caused the page to overflow with a vertical
+     scrollbar. `display: grid` gives the playground (which fills via
+     `height: 100%`) a definite track to resolve against — a flex-sized block on
+     its own is not treated as a definite height for percentage-height children,
+     which would otherwise collapse the playground. */
+  .playground-container {
+    flex: 1;
+    min-height: 0;
+    width: 100%;
+    display: grid;
+  }
+</style>