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>
This commit is contained in:
co-authored by
Claude Opus 5
parent
1885c3e54e
commit
cf63f11bfb
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user