Show dialogue choices in a box above the text box (#67)

YES/NO, menus and amount boxes float above the text box on the right, as in
the original. The cursor marker reserves its width so the box keeps its size
as the cursor moves, and the app-made CANCEL button under menus is removed
because B leaves the menu.

Closes #67 [no-card]

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/main.ts

@@ -291,10 +291,8 @@ function showChoice(choice: Choice | undefined) {
         return option;
       }),
     );
-    container.replaceChildren(
+    // As in the original there is no CANCEL entry: B leaves the menu.
-      list,
+    container.replaceChildren(list);
-      button("CANCEL", undefined, () => runtime.choose(-1)),
-    );
     // On a small screen the box scrolls; keep the highlighted entry in view.
     list
       .querySelector('[aria-selected="true"]')

src/ui/styles.css

@@ -310,9 +310,7 @@ dialog h2 {
   left: 12px;
   right: 12px;
   bottom: 12px;
-  /* Large text never pushes the box above the screen; it scrolls. */
+  /* Large text scrolls inside its own paragraph; the choices float above. */
-  max-height: calc(100% - 24px);
-  overflow-y: auto;
   padding: 12px;
   color: var(--ink);
   background: var(--cream);
@@ -331,15 +329,31 @@ dialog h2 {
   align-items: center;
   margin-top: 4px;
 }
+/* As in the original, the choices (YES/NO, menus, amounts) are a box of their
+   own above the text box, on the right. */
 .native-dialogue > .dialogue-choice {
+  position: absolute;
+  right: -5px;
+  bottom: calc(100% + 13px);
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 6px;
-  margin-top: 6px;
+  max-width: calc(100% + 10px);
+  max-height: min(60vh, 30em);
+  margin: 0;
+  overflow-y: auto;
+  padding: 10px;
+  background: var(--cream);
+  border: 5px double var(--ink);
+  box-shadow: 4px 4px 0 #0007;
+}
+.native-dialogue > .dialogue-choice[hidden] {
+  display: none;
 }
 /* The original's YES/NO box is vertical, YES above NO, moved with Up/Down. */
-.native-dialogue > .dialogue-choice[data-kind="yesno"] {
+.native-dialogue > .dialogue-choice[data-kind="yesno"],
+.native-dialogue > .dialogue-choice[data-kind="menu"] {
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: flex-end;
@@ -781,9 +795,14 @@ dialog h2 {
     text-decoration: underline;
   }
 }
-.dialogue-choice button[aria-pressed="true"]::before {
+/* Every entry reserves the cursor's width, so the box keeps its size and the
+   labels stay aligned as the cursor moves. */
+.dialogue-choice button[aria-pressed]::before {
   content: "▶ ";
 }
+.dialogue-choice button[aria-pressed="false"]::before {
+  visibility: hidden;
+}
 .dialogue-choice button[aria-pressed="false"] {
   color: var(--ink);
   background: var(--cream-dark);