From 62fe4bf6648e35137e4218d78d61e5871ea384f6 Mon Sep 17 00:00:00 2001
From: kawa <us.fame.sq@gmail.com>
Date: Tue, 13 Oct 2026 11:08:07 +0200
Subject: [PATCH] Keep the choice box inside the screen above the text box
 (Closes #70)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Since the choices moved into their own box above the text box, its
height was capped by the viewport (60vh, 30em) rather than by the room
on the game screen. On a phone the start menu ran off the top of the
screen, which clips it, so POKéDEX, POKéMON and PACK could not be
tapped. The box is now also capped at the screen's height above the
text box, measured when it opens and whenever the screen or the text
box resizes, and scrolls when its entries do not fit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/main.ts       | 15 +++++++++++++++
 src/ui/styles.css |  3 ++-
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/main.ts b/src/main.ts
index a8549d0..4161d5b 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -140,9 +140,24 @@ function showWorld(world: GameWorld) {
     `${world.map.name}. Position ${world.x}, ${world.y}. ${controlsSummary()}`,
   );
 }
+/** The choice box floats above the text box, so it may only be as tall as
+ * the screen above the text box: a phone's start menu then scrolls instead
+ * of running off the top of the screen, where it cannot be tapped. */
+function fitChoiceBox() {
+  const container = get("dialogue-choice");
+  if (container.hidden) return;
+  // The box's own 13px gap above the text box and the 12px inset the text
+  // box keeps from the screen's edges.
+  const room = get("native-dialogue").offsetTop - 13 - 12;
+  container.style.setProperty("--choice-room", `${Math.max(room, 0)}px`);
+}
+new ResizeObserver(fitChoiceBox).observe(get("native-dialogue"));
+new ResizeObserver(fitChoiceBox).observe(canvas.parentElement!);
 function showChoice(choice: Choice | undefined) {
   const container = get("dialogue-choice");
+  const shown = !container.hidden;
   container.hidden = !choice;
+  if (choice && !shown) fitChoiceBox();
   const key = choice ? JSON.stringify(choice) : "";
   if (container.dataset.choice === key) return;
   container.dataset.choice = key;
diff --git a/src/ui/styles.css b/src/ui/styles.css
index f4c7657..409e2fc 100644
--- a/src/ui/styles.css
+++ b/src/ui/styles.css
@@ -346,7 +346,8 @@ dialog h2 {
   justify-content: flex-end;
   gap: 6px;
   max-width: calc(100% + 10px);
-  max-height: min(60vh, 30em);
+  /* --choice-room (main.ts) is the screen's height above the text box. */
+  max-height: min(60vh, 30em, var(--choice-room, 60vh));
   margin: 0;
   overflow-y: auto;
   padding: 10px;