DenozordecandClaude Sonnet 5.5
7f60dc9960
button[data-slot] gets padding 0 in the base layer (ReUI size utilities and the console's own styles still win). The switch's help now lines up under its label by the switch's 32px, and the dead .toggle input CSS from the native-switch days is gone. Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
49 lines
1.8 KiB
CSS
49 lines
1.8 KiB
CSS
.check {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: var(--s-6);
|
||
/* The label IS the target: it is clicked from the text, not only from the box.
|
||
At 22 px tall it fell short for a finger. */
|
||
min-height: 26px;
|
||
padding: var(--s-2) 0;
|
||
font-size: var(--t-4);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* The box aligns with the label's first line, not with its box. */
|
||
.text { min-width: 0; }
|
||
|
||
.help {
|
||
composes: withCode from './text.module.css';
|
||
font-size: var(--t-3);
|
||
color: var(--mute);
|
||
line-height: 1.55;
|
||
margin-top: var(--s-3);
|
||
margin-left: calc(var(--ctrl) + var(--s-6));
|
||
/*
|
||
720 px, and **it is a local exception with its figure**, not a missing token.
|
||
|
||
Decided 2026-09-03, in a design review. Measured
|
||
first: **it really bites**. At 1920, with the control column at 1022 px, the nine
|
||
checkbox helps of `Settings › General` come out at exactly 720, so it is not dead
|
||
code that can be deleted.
|
||
|
||
And it does not go up to `tokens.css` for the same reason the Dashboard hero did
|
||
not: **only this uses it**. A global token is declared when two places share a
|
||
decision; declaring one for a single use is inventing vocabulary nobody speaks.
|
||
|
||
What the cap is and why it is not `--help-col`: this is **the only help the
|
||
dense-form design did NOT move** to the third column. A checkbox's stays under its control
|
||
(because the checkbox IS its label and separating them would break that unit), so
|
||
it inherits the control column's width, which on wide screens goes well past
|
||
what reads comfortably. 720 is the readable line cap for THIS case.
|
||
|
||
If some day a second help stays out of the third column, then there are two and
|
||
a token is due; today there are nine from the same place.
|
||
*/
|
||
max-width: 720px;
|
||
}
|
||
|
||
/* The switch is ReUI's (32px wide), so its help lines up under the label by that width. */
|
||
.helpSwitch { margin-left: calc(32px + var(--s-6)); }
|