Keep the choice box inside the screen above the text box (Closes #70)

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

@@ -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;

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;