Phone fixes at a crowded table: focus scroll in viewport coordinates, a wrapping masthead, a slimmer bar

Turning the ledger toward a wizard summed a sticky cell's offset, which
moves with the scroll; it now uses viewport rectangles and the width the
pinned columns cover, so repeated and switched taps land the same. The
masthead's actions wrap instead of running off a phone. The phone bar
names you, the wizard in focus and the count, with the roster a tap away.
The hands row's first cell is pinned with the rest of the turn column.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0141G6xqLeNRYEtviLWSB5Up

src/lib/components/Ledger.svelte

@@ -75,17 +75,22 @@
 
 	const crowded = $derived(duel.others.length >= 3);
 
-	// The focused wizard's columns slide in just past the pinned ones.
+	// The focused wizard's columns slide in just past the pinned ones. Sticky cells
+	// report where they are stuck, not where they lie, so the sums are done in
+	// viewport coordinates: the header's distance from the scroller's edge plus
+	// the current scroll, less the width the pinned columns always cover.
 	$effect(() => {
 		const who = duel.focus;
 		void duel.focusTick;
 		if (!who || !scroller) return;
 		const th = scroller.querySelector<HTMLElement>(`th[data-who="${who}"]`);
-		const pinned = scroller.querySelector<HTMLElement>('thead th.pin-right');
 		if (!th) return;
-		const left = pinned ? pinned.offsetLeft + pinned.offsetWidth : 0;
+		const pinnedWidth = ['th.turn', 'thead tr.hands th.pin-left', 'thead tr.hands th.pin-right']
+			.map((sel) => scroller!.querySelector<HTMLElement>(sel)?.getBoundingClientRect().width ?? 0)
+			.reduce((a, b) => a + b, 0);
+		const left = th.getBoundingClientRect().left - scroller.getBoundingClientRect().left + scroller.scrollLeft - pinnedWidth;
 		const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-		scroller.scrollTo({ left: th.offsetLeft - left, behavior: reduce ? 'auto' : 'smooth' });
+		scroller.scrollTo({ left: Math.max(0, left), behavior: reduce ? 'auto' : 'smooth' });
 	});
 </script>
 
@@ -110,7 +115,7 @@
 				{/each}
 			</tr>
 			<tr class="hands">
-				<th></th>
+				<th class="turn"></th>
 				{#each columns as who (who)}
 					<th scope="col" class:pin-left={who === duel.me}>left</th>
 					<th scope="col" class:pin-right={who === duel.me}>right</th>

src/lib/components/MobileBar.svelte

@@ -4,16 +4,28 @@
 	import { MAX_HP } from '$lib/game/state';
 
 	let { duel }: { duel: Duel } = $props();
+
+	/** Past three wizards the bar names you, the wizard in focus, and the count; the roster is a tap away. */
+	const crowded = $derived(duel.others.length >= 3);
+	const shown = $derived(crowded ? [duel.focus ?? duel.foeId].filter((id) => id !== duel.me) : duel.others);
+
+	function toRoster() {
+		const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+		document.getElementById('roster')?.scrollIntoView({ behavior: reduce ? 'auto' : 'smooth', block: 'start' });
+	}
 </script>
 
 {#if !duel.state.over}
 	<div class="bar" class:watching={duel.spectating}>
 		<div class="health" class:many={duel.others.length > 1}>
 			{#if !duel.spectating}<span><em>{duel.you.name}</em> {duel.you.hp}/{MAX_HP}</span>{/if}
-			{#each duel.others as id (id)}
+			{#each shown as id (id)}
 				{@const w = duel.state.wizards[id]}
 				<span class:gone={!w.alive || w.surrendered}><em>{w.name}</em> {w.hp}/{MAX_HP}</span>
 			{/each}
+			{#if crowded}
+				<button type="button" class="count" onclick={toRoster}>{duel.state.seats.length} wizards</button>
+			{/if}
 		</div>
 		{#if duel.spectating}
 			<span class="gallery">the gallery</span>
@@ -88,6 +100,15 @@
 		opacity: 0.6;
 	}
 
+	.count {
+		background: none;
+		border: 0;
+		padding: 0;
+		font: inherit;
+		color: var(--frost);
+		text-decoration: underline dotted;
+	}
+
 	.gestures {
 		display: flex;
 		gap: 0.5rem;

src/lib/components/Roster.svelte

@@ -26,7 +26,7 @@
 	}
 </script>
 
-<section class="roster" aria-label="The other wizards">
+<section class="roster" id="roster" aria-label="The other wizards">
 	<h2>At the table</h2>
 	<ul>
 		{#each duel.others as id (id)}
@@ -53,6 +53,7 @@
 
 <style>
 	.roster {
+		scroll-margin-top: 0.5rem;
 		padding: 0.75rem 0 0.4rem;
 		border-bottom: 1px solid var(--rule);
 	}