justinzeus/spreadlab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

web: mobile pass, slice 10 of M3

Browse source 
The MobileScoreStrip lands: sticky under the app bar, one pill per
panel with the round-synced colored share, horizontally scrollable (the
only horizontal scroller, verified at 320 px), tapping scrolls to the
panel (instant under reduced motion, scroll-margin clears the sticky
stack).

Touch targets reach 44 px on mobile: player buttons, panel kebabs, and
toolbar buttons; Export collapses to its icon so the toolbar stays one
row down to 320 px.
This commit is contained in:
Justin Visser 2026-06-10 18:09:51 +02:00
parent e0ecc5c6ba
commit 609ba6f0dd
5 changed files with 163 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

16
web/src/components/ScenarioPanel.vue
View file

@ -94,7 +94,7 @@ const dimmed = computed(() => store.state.runState === 'running' && result.value
</script>
<template>
<section class="panel" :class="{ dimmed }" :aria-label="panel.label">
<section :id="`panel-${panel.id}`" class="panel" :class="{ dimmed }" :aria-label="panel.label">
<div class="head">
<span class="swatch" :style="{ background: accent }" aria-hidden="true" />
<span class="label">{{ panel.label }}</span>
@ -340,4 +340,18 @@ const dimmed = computed(() => store.state.runState === 'running' && result.value
background-position: -200% 0;
}
}
@media (max-width: 760px) {
/* 44 px touch target for the kebab (spec section 8). */
.kebab {
min-width: 44px;
min-height: 44px;
margin-right: -12px;
}
/* Anchor target lands below the sticky app bar plus score strip. */
.panel {
scroll-margin-top: 128px;
}
}
</style>