From 5989e9ea928a8ea23a4e24b8187324d006296706 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 06:06:40 +0200 Subject: [PATCH] Reach the page numbers and the sort button with a finger MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- resources/views/components/sort-header.blade.php | 7 +++++-- resources/views/pagination/laravel/tailwind.blade.php | 2 +- resources/views/pagination/livewire/tailwind.blade.php | 10 +++++----- tests/Feature/Components/DataTest.php | 9 +++++++++ 4 files changed, 20 insertions(+), 8 deletions(-) diff --git a/resources/views/components/sort-header.blade.php b/resources/views/components/sort-header.blade.php index 5fc98da2..7ac2cf60 100644 --- a/resources/views/components/sort-header.blade.php +++ b/resources/views/components/sort-header.blade.php @@ -3,7 +3,10 @@ Pressing it sorts by this column, ascending first and then flipping; the arrow says which way, and `aria-sort` says it to a screen reader. A column that cannot be sorted is a plain ``. - `class` lands on the `` (`text-end` for a number column moves the button with it). --}} + `class` lands on the `` (`text-end` for a number column moves the button with it). + + The button is only as tall as its title-small line, so it carries `touch-target` and catches + presses over M3's 48px minimum; the cell's own padding belongs to the cell, not to it. --}} @props([ 'sortBy' => [], @@ -23,7 +26,7 @@ wire:click="$set('{{ $model }}', {{ json_encode(['column' => $column, 'direction' => $next]) }})" data-sort-header @class([ - 'group/sort focus-ring inline-flex cursor-pointer items-center gap-1 rounded-corner-xs', + 'group/sort focus-ring touch-target inline-flex cursor-pointer items-center gap-1 rounded-corner-xs', 'text-on-surface' => $active, 'hover:text-on-surface' => ! $active, ]) diff --git a/resources/views/pagination/laravel/tailwind.blade.php b/resources/views/pagination/laravel/tailwind.blade.php index 4083dd81..7fef8e15 100644 --- a/resources/views/pagination/laravel/tailwind.blade.php +++ b/resources/views/pagination/laravel/tailwind.blade.php @@ -5,7 +5,7 @@ @php $step = 'grid size-10 place-items-center rounded-corner-full type-label-lg tabular-nums'; - $live = $step.' state-layer focus-ring text-on-surface'; + $live = $step.' state-layer focus-ring touch-target text-on-surface'; $dead = $step.' text-on-surface/38'; @endphp diff --git a/resources/views/pagination/livewire/tailwind.blade.php b/resources/views/pagination/livewire/tailwind.blade.php index e08b2355..27839dcd 100644 --- a/resources/views/pagination/livewire/tailwind.blade.php +++ b/resources/views/pagination/livewire/tailwind.blade.php @@ -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 diff --git a/tests/Feature/Components/DataTest.php b/tests/Feature/Components/DataTest.php index cca2a077..97801759 100644 --- a/tests/Feature/Components/DataTest.php +++ b/tests/Feature/Components/DataTest.php @@ -26,6 +26,15 @@ it('sorts by its column, ascending first and then flipping', function () { ->toContain('"direction":"asc"'); }); +it('gives the sort button and every page control a 48px target', function () { + $pages = new LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '/shares']); + + expect((string) $this->blade('Size')) + ->toContain('touch-target') + ->and((string) $pages->links()) + ->toContain('state-layer focus-ring touch-target'); +}); + it('draws Laravel\'s paginators in M3', function () { $pages = new LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '/shares']);