Move browser-test probes off Tailwind utility classes

Plan step 38 (last batch), plan step 42's target for tests/: every Tailwind utility class in a tests/Browser/*.php probe's Blade string or Livewire component render() (~60 class attributes across 14 files) becomes an inline style built from --md-sys-color-*/--md-sys-shape-*/ --md-sys-measurement-* tokens or a literal px value for an arbitrary demo size — PickingTest's clip box, every probe's <body class="bg-surface">, the grid/stack/row wrapper divs, the carousel item's coloured filler. No test's assertions, selectors or expected text change; these are layout containers around the components under test, not anything a test reads. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9
2026-09-15 05:34:20 +02:00
parent 067626c52e
commit d15312023b
14 changed files with 55 additions and 55 deletions
@@ -28,7 +28,7 @@ class FieldProbe extends Component
    public function render(): string
    {
        return <<<'BLADE'
-            <div class="grid max-w-md gap-4 p-4">
+            <div style="display: grid; max-width: 448px; gap: var(--md-sys-measurement-space200); padding: var(--md-sys-measurement-space200);">
                <p>name: <span id="name">{{ $name }}</span></p>
                <p>hours: <span id="hours">{{ $hours }}</span></p>
                <p>files: <span id="files">{{ implode(',', $files) }}</span></p>
@@ -75,7 +75,7 @@ function fieldProbe()
                @vite(config('livewire-material.showcase.vite'))
                @livewireStyles
            </head>
-            <body class="bg-surface">
+            <body style="background-color: var(--md-sys-color-surface);">
                <livewire:field-probe />
                <x-toast />
                @livewireScripts