From 1019cb5a38dda075882ce1af76ec37ae8ab36040 Mon Sep 17 00:00:00 2001
From: Eric Wagoner <ewagoner@gmail.com>
Date: Thu, 17 Sep 2026 20:48:47 -0400
Subject: [PATCH] The casting panel leads the right column, and a number's
 movement button sits in the dock
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

On a laptop the right column scrolls in place, and the turn banner,
the coaching, and the scoresheet pushed the casting panel — where an
attack is answered and a number is played for movement — below the
fold, showing as a sliver. The panel now leads the column while a card
is aimed or a blow answered, and a number's "Play for +N movement"
also stands in the dock beneath the board.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
---
 packages/web/src/App.svelte | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/packages/web/src/App.svelte b/packages/web/src/App.svelte
index da48038..b0063eb 100644
--- a/packages/web/src/App.svelte
+++ b/packages/web/src/App.svelte
@@ -3436,6 +3436,15 @@
             {#if selectedCard?.cardId === "teleport" && pendingTeleport}
               <button class="stamp tiny primary" onclick={confirmTeleport}>teleport!</button>
             {/if}
+            {#if selectedCard && isNumberCard(selectedCard.cardId)}
+              {@const needsAdd = view.turn.numberPlayedForMovement}
+              {@const haveAdd = view.yourHand.some((c) => c.cardId === "add")}
+              {#if !(needsAdd && !haveAdd)}
+                <button class="stamp tiny primary" onclick={playNumberForMovement}>
+                  Play for +{cardDef(selectedCard.cardId).value} movement{needsAdd ? " (spends your Add)" : ""}
+                </button>
+              {/if}
+            {/if}
             <button class="hint-cancel dock-cancel" onclick={clearSelection}>cancel</button>
           </div>
         {/if}
@@ -4398,6 +4407,10 @@
     margin: auto;
   }
   .paper-rail { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
+  /* While a card is aimed or an attack answered, its panel leads the
+   * column: on a short screen the banner, the coaching, and the
+   * scoresheet would otherwise push it below the fold of a scrolling rail. */
+  .paper-rail > .cast-panel { order: -1; }
 
   .slip {
     background: #e9e1cb;