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

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 `<th>`.
-     `class` lands on the `<th>` (`text-end` for a number column moves the button with it). --}}
+     `class` lands on the `<th>` (`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,
         ])

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
 

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
+     name, and the scroll back to the top of whatever `scrollTo` names. A page number is drawn as a
-     icon-button targets; the current one is the selected state, secondary-container, never the
+     40px state layer and catches presses over M3's 48px target (`touch-target`); the current one is
-     action colour — it is where you are, not what to do next. On a phone the numbers give way to
+     the selected state, secondary-container, never the action colour — it is where you are, not
-     "Page 2 of 7". --}}
+     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
 

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('<x-sort-header column="size" :sort-by="[]">Size</x-sort-header>'))
+        ->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']);