fix(eidos): universal trigger-side padding reset for picker fields

The picker fields (date / time / time-range / date-range) use a flex
`[data-archetype='input']` box that holds the segments AND the overlay icon
trigger, with 12px text padding on BOTH sides — so the trailing icon sat behind
a full text-padding gap on top of its own glyph box (a visible double gap). The
reset that zeroes the input's trigger-side padding moved from the date-only
`field-control-trigger.css` (imported on just the date-picker) into the global
`archetypes.css`, keyed off the `field-trigger` archetype every picker trigger
carries — so it covers ALL pickers on every page, and outranks each
`[data-x-field-input]` rule (0,2,0 > 0,1,0) regardless of load order.

Verified by measurement: time-field input padding-inline-end 12px → 0 (text side
keeps 12px). Cross-checked that password-field / search-field / combobox were
already correct (flex/grid layout, ~2px input padding, affordances as flush
siblings) — only the pickers had the double gap. Excludes words/palabras/chronos.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
active-uix
dev 4 months ago
parent f20efd4681
commit 36770da202

@ -31,6 +31,21 @@
opacity: 0.5;
}
/* ── Field trigger ────────────────────────────────────────────────────────
* A field / input / select / picker overlay affordance (calendar · clock ·
* swatch · chevron). It is NOT a generic button — it sits flush inside the
* field. When an `input`-archetype control hosts one, the input drops its
* padding on the TRIGGER SIDE (logical `padding-inline-end` → works in both LTR
* and RTL, the trigger is pushed to the inline-end): the trigger sits flush at
* the edge and provides its own inset (its centred glyph box), instead of the
* input's full text padding adding a second, larger gap. Lives here (global +
* archetype-keyed) so it covers EVERY field on every page, and outranks each
* `[data-x-field-input]` padding rule (0,2,0 > 0,1,0) regardless of load order.
*/
[data-archetype='input']:has([data-archetype='field-trigger']) {
padding-inline-end: 0;
}
/* ── Overlay ──────────────────────────────────────────────────────────────
* Modal backdrops behind dialog/drawer/popover content.
*/

@ -15,15 +15,11 @@
*/
/*
* When a field input hosts a control trigger, the input drops its padding on
* the trigger side (logical → works in both LTR and RTL): the trigger sits flush
* at the edge and provides its own inset (the centred glyph in its 1.75em box),
* instead of the input's full text padding adding a second, larger gap. One rule
* for every field — keys off the input archetype + the shared trigger marker.
* The trigger-side padding reset for the host input lives in the global
* `archetypes.css` (`[data-archetype='input']:has([data-archetype='field-
* trigger'])`) so it covers every field on every page, not only where this file
* is imported.
*/
[data-archetype='input']:has([data-field-control-trigger]) {
padding-inline-end: 0;
}
[data-field-control-trigger] {
display: inline-flex;

Loading…
Cancel
Save

Powered by TurnKey Linux.