Scan for Tailwind breakpoints, and drive the shell by class in the browser

Plan steps 15-17's testing. `tests/Feature/BreakpointsTest.php` reads every
file under resources/views, resources/css and resources/js — showcase example
heredocs included — and fails on any Tailwind breakpoint prefix and on any
media query or `matchMedia` string at 40, 48, 64 or 80rem (or 640/768/1024/
1280px, or the 39.99rem that stood for "below 640"). Both scans were checked
against a deliberately reintroduced `sm:w-auto` and an 80rem query.

Every render test that asserted a `sm:`/`lg:`/`xl:` class now asserts the M3
class, the drawer's pane query is 52.5rem, and the theme script keeps
`data-rail-auto` through `wire:navigate`.

NavigationTest drives the shell at 599/600/839/840/1199/1200/1600 with the
expectation each class carries: the bar on a compact window, the 96px rail from
the medium class's first pixel, a standard rail collapsed through expanded whose
menu button widens it in place with no scrim, and the rail expanded to begin
with from large and at extra-large. (Not run here — the Browser suite is out of
scope for this stream.)

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 05:35:43 +02:00
co-authored by Claude Fable 5.1
parent afc8e199ae
commit 9fb3126038
9 changed files with 169 additions and 34 deletions
+4 -4
View File
@@ -129,9 +129,9 @@ it('shows the loading indicator while its own action runs', function () {
->assertSee('wire:target="upload"', false);
});
it('hides a responsive label below lg', function () {
it('hides a responsive label below expanded', function () {
$this->blade('<x-button label="New share" icon="add" responsive />')
->assertSee('<span class="max-lg:hidden">New share</span>', false);
->assertSee('<span class="max-expanded:hidden">New share</span>', false);
});
it('anchors its tooltip to itself', function () {
@@ -145,11 +145,11 @@ it('anchors its tooltip to itself', function () {
->not->toContain('aria-label="Saves the draft"');
});
it('is a FAB below sm and a filled button above it, in one element', function () {
it('is a FAB on a compact window and a filled button from medium, in one element', function () {
$html = (string) $this->blade('<x-button label="New share" icon="add" fab />');
expect(substr_count($html, '<button'))->toBe(1)
->and($html)->toContain('max-sm:fixed')->toContain('max-sm:bg-primary-container')->toContain('bg-primary text-on-primary');
->and($html)->toContain('max-medium:fixed')->toContain('max-medium:bg-primary-container')->toContain('bg-primary text-on-primary');
});
it('submits a form when asked', function () {