Reach the page numbers and the sort button with a finger

Both were 40px or less, which is M3's state-layer size, not its 48px
target: the paginator's steps and page numbers keep their 40px circle and
now catch presses over 48, and the sort button — a title-small line and a
16px arrow, about 20px tall — does the same, since the cell's padding
belongs to the cell and not to the button inside it.

Plan step 20, findings IN-15 and IN-17.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
This commit is contained in:
Andreas Reinhold / reini
2026-09-14 06:06:40 +02:00
co-authored by Claude Fable 5.1
parent dd3d8afdb9
commit 5989e9ea92
4 changed files with 20 additions and 8 deletions
@@ -3,10 +3,10 @@
not exist in an M3 theme.
The wiring is Livewire's, unchanged: `previousPage`, `nextPage` and `gotoPage` with the page
name, and the scroll back to the top of whatever `scrollTo` names. Page numbers are 40px
icon-button targets; the current one is the selected state, secondary-container, never the
action colour — it is where you are, not what to do next. On a phone the numbers give way to
"Page 2 of 7". --}}
name, and the scroll back to the top of whatever `scrollTo` names. A page number is drawn as a
40px state layer and catches presses over M3's 48px target (`touch-target`); the current one is
the selected state, secondary-container, never the action colour it is where you are, not
what to do next. On a phone the numbers give way to "Page 2 of 7". --}}
@php
if (! isset($scrollTo)) {
@@ -20,7 +20,7 @@
: '';
$step = 'grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums';
$live = $step.' state-layer focus-ring cursor-pointer text-on-surface';
$live = $step.' state-layer focus-ring touch-target cursor-pointer text-on-surface';
$dead = $step.' text-on-surface/38';
@endphp