From 525ff092f2be3de3ab5a4a7b5fb759986d0a0d2d Mon Sep 17 00:00:00 2001
From: Leo Compe <leocompe@Leos-MacBook-Pro.local>
Date: Sun, 4 Oct 2026 16:21:32 +0200
Subject: [PATCH] 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       |  6 ++----
 src/ui/styles.css | 31 +++++++++++++++++++++++++------
 2 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/src/main.ts b/src/main.ts
index 1908e72..050bd77 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -291,10 +291,8 @@ function showChoice(choice: Choice | undefined) {
         return option;
       }),
     );
-    container.replaceChildren(
-      list,
-      button("CANCEL", undefined, () => runtime.choose(-1)),
-    );
+    // As in the original there is no CANCEL entry: B leaves the menu.
+    container.replaceChildren(list);
     // On a small screen the box scrolls; keep the highlighted entry in view.
     list
       .querySelector('[aria-selected="true"]')
diff --git a/src/ui/styles.css b/src/ui/styles.css
index e4af908..43c9b89 100644
--- a/src/ui/styles.css
+++ b/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. */
-  max-height: calc(100% - 24px);
-  overflow-y: auto;
+  /* Large text scrolls inside its own paragraph; the choices float above. */
   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);