fix(client): scroll inside inline page modals again, not the document

index.html

@@ -58,6 +58,12 @@
         flex-basis: 100%;
         width: 100%;
       }
+      /* body is a column while an inline page is open (see styles.css):
+         size the slot to its content there, not to 100% of the height. */
+      body.page-open #pw-oop-flex_container {
+        flex-basis: auto;
+        flex-shrink: 0;
+      }
 
       /* Google Funding Choices CCPA link override */
       .fc-dns-link,
@@ -234,7 +240,7 @@
 
     <!-- MAIN CONTENT AREA -->
     <div
-      class="in-[.in-game]:hidden flex-1 basis-full min-w-0 min-h-dvh relative pt-[var(--top-ad-pad,0px)] transition-[margin] duration-500 ease-out will-change-[margin-left] flex flex-col"
+      class="in-[.in-game]:hidden flex-1 basis-full min-w-0 min-h-dvh in-[.page-open]:min-h-0 in-[.page-open]:overflow-hidden relative pt-[var(--top-ad-pad,0px)] transition-[margin] duration-500 ease-out will-change-[margin-left] flex flex-col"
     >
       <!-- Desktop Top Bar (sticky so it stays visible while the page scrolls,
            offset below the header ad when one is showing) -->

src/client/Navigation.ts

@@ -35,6 +35,11 @@ export function initNavigation() {
       }
     }
 
+    // Inline pages scroll inside their modal, not the document (see
+    // styles.css). Set after closing the previous modal: an inline modal's
+    // close() re-enters showPage("page-play"), which would clear this.
+    document.body.classList.toggle("page-open", pageId !== "page-play");
+
     // Handle page-play separately (it's not a page-content element)
     const pagePlayEl = document.getElementById("page-play");
     if (pageId === "page-play") {

src/client/components/MainLayout.ts

@@ -19,10 +19,10 @@ export class MainLayout extends LitElement {
   render() {
     return html`
       <main
-        class="relative [.in-game_&]:hidden flex flex-col flex-1 w-full px-0 lg:px-[clamp(1.5rem,3vw,3rem)] pt-0 lg:pt-[clamp(0.75rem,1.5vw,1.5rem)] pb-0 lg:pb-[clamp(0.375rem,0.75vw,0.75rem)]"
+        class="relative [.in-game_&]:hidden flex flex-col flex-1 min-h-0 w-full px-0 lg:px-[clamp(1.5rem,3vw,3rem)] pt-0 lg:pt-[clamp(0.75rem,1.5vw,1.5rem)] pb-0 lg:pb-[clamp(0.375rem,0.75vw,0.75rem)]"
       >
         <div
-          class="w-full lg:max-w-[20cm] 2xl:max-w-[24cm] mx-auto flex flex-col flex-1 gap-0 lg:gap-[clamp(1.5rem,3vw,3rem)] overflow-x-clip sm:px-4 lg:px-0"
+          class="w-full lg:max-w-[20cm] 2xl:max-w-[24cm] mx-auto flex flex-col flex-1 min-h-0 gap-0 lg:gap-[clamp(1.5rem,3vw,3rem)] overflow-x-clip sm:px-4 lg:px-0"
         >
           ${this._initialChildren}
         </div>

src/client/styles.css

@@ -101,6 +101,17 @@ body.in-game {
   overflow: hidden;
 }
 
+/* An inline page (store, settings, leaderboard, ...) is a modal rendered in
+   the content area: lock the document so it scrolls inside the modal, and
+   stack body children in a column so the content area gets the height left
+   under the header-ad slot. */
+body.page-open {
+  height: 100%;
+  overflow: hidden;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
 * {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;