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
+9
View File
@@ -26,6 +26,15 @@ it('sorts by its column, ascending first and then flipping', function () {
->toContain('&quot;direction&quot;:&quot;asc&quot;');
});
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']);