Keep a switch's track whole beside long text in a row

`[data-md-toggle] { min-width: 0 }` let the switch's root shrink below
its 52px track as a flex item. In `<x-row justify="between">` beside a
paragraph, flex shrinking weighs each item by its width, so the root of
a bare switch gave up a share of its 52px, and a switch with a long
label of its own gave its label a column one word wide and less; the
track, which does not shrink inside the root, ran out of it and past a
card's edge on a phone. `<x-checkbox>`'s root did the same with its box.

Both roots now keep their automatic minimum, the control and, beside a
label, its longest word, so the text beside the control, or the
control's own label, wraps instead. The toggle's docblock and the skill
say so.

A browser test lays a bare switch, a labelled switch and a bare
checkbox beside long text in rows on a 393px window and checks each
control's size and that it stays inside its row, and that the switch's
own label wraps inside its root; it fails without the change in Chrome,
Firefox and Safari.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

resources/boost/skills/livewire-material-development/SKILL.md

@@ -682,6 +682,7 @@ M3 selection controls on native inputs; the whole row is the label.
 - `<x-checkbox label hint right indeterminate />` — `indeterminate` for a "select all" whose items are partly ticked (bind it to a server expression; it follows every render). Grouping is yours: from `expanded` (840px) M3 wants a set of related checkboxes gathered into a contained region rather than one long column, so wrap the set in `<x-grid :columns="['compact' => 1, 'expanded' => 2]" gap="space200">` (or a card or side sheet) under a heading that names what the group asks.
 - `<x-radio label wire:model :options inline />` — options `['id', 'name', 'hint', 'disabled']` (`option-value`, `option-label`, `option-hint`); `value` checks an option without `wire:model`; `name` names an unbound group. M3 stacks radios and cautions against a row at any width, so reach for `inline` only for two or three short labels; it also wants five options or fewer and one of them chosen when the page loads.
 - `<x-toggle label hint right icons />` — M3 switch (`role="switch"`); `icons` puts a check and a cross on the handle, `icons="selected"` only the check. Without `label`, pass `aria-label`.
+- Beside text in a row — a setting's words and its switch in `<x-row justify="between">` — a switch keeps its 52px track and a checkbox its box: the text beside it wraps, and so does the control's own label.
 
 ```blade
 <x-checkbox label="All files" :checked="count($selected) === $files->count()" :indeterminate="$selected && count($selected) < $files->count()" wire:click="toggleAll" />

resources/css/components/checkbox.css

@@ -22,8 +22,10 @@
 @import './icon.css';
 
 @layer material.components {
+    /* In a flex row the root keeps its automatic minimum, the box and beside a label its longest
+       word, so the text beside it wraps before the box is pushed out of the row (toggle.css). */
     [data-md-checkbox] {
-        min-width: 0;
+        min-width: auto;
     }
 
     [data-md-checkbox-box] {

resources/css/components/toggle.css

@@ -23,8 +23,13 @@
 @import './icon.css';
 
 @layer material.components {
+    /* In a flex row, a setting's text beside its switch, the root keeps its automatic minimum:
+       the track, and beside a label the track, the gap and the label's longest word. So the text
+       beside a bare switch, or the switch's own label, wraps before the track gives way; a root
+       free to shrink below 52px left the track running out of it, and off a card's edge on a
+       phone. */
     [data-md-toggle] {
-        min-width: 0;
+        min-width: auto;
     }
 
     /* The positions below are the handle's centres less half its size, measured inside the track's

resources/views/components/toggle.blade.php

@@ -8,7 +8,9 @@
      (resources/css/components/toggle.css).
 
      Without a label the row is only the 52×32 track, so the track carries `md-touch-target` and
-     catches presses over M3's 48px minimum. `class` and `style` land on the root, `data-md-toggle`. --}}
+     catches presses over M3's 48px minimum. Beside text in a row (`<x-row justify="between">`, a
+     setting's words and its switch) the track never shrinks: the text wraps, and so does the
+     switch's own label. `class` and `style` land on the root, `data-md-toggle`. --}}
 
 @props([
     'label' => null,