The casting panel leads the right column, and a number's movement button sits in the dock

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
This commit is contained in:
Eric Wagoner
2026-09-17 20:48:47 -04:00
co-authored by Claude Fable 5.1
parent e6ede1aa48
commit 1019cb5a38
+13
View File
@@ -3436,6 +3436,15 @@
{#if selectedCard?.cardId === "teleport" && pendingTeleport} {#if selectedCard?.cardId === "teleport" && pendingTeleport}
<button class="stamp tiny primary" onclick={confirmTeleport}>teleport!</button> <button class="stamp tiny primary" onclick={confirmTeleport}>teleport!</button>
{/if} {/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> <button class="hint-cancel dock-cancel" onclick={clearSelection}>cancel</button>
</div> </div>
{/if} {/if}
@@ -4398,6 +4407,10 @@
margin: auto; margin: auto;
} }
.paper-rail { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; } .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 { .slip {
background: #e9e1cb; background: #e9e1cb;