eric/waving-hands
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Eric Wagoner
2026-09-23 11:41:28 -04:00
co-authored by Claude Fable 5.1
parent 5c79a65319
commit effe17c729
5 changed files with 44 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Ledger.svelte
+10 -5
View File
@@ -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>