From 1431970371ea303e9cfc8512d0bcc94154735136 Mon Sep 17 00:00:00 2001 From: dev Date: Mon, 22 Jun 2026 11:43:10 +0200 Subject: [PATCH] fix(time-range-picker): lay the field on one line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The picker root was `flex-direction: column`, stacking label + start + end into three rows. The `1fr auto 1fr` grid that would place start — end on one row lives on `[data-time-range-field]`, which the picker never renders (its field provider is context-only, ref=null) — so it never activated. Mirror the date-range-picker reference: the root becomes a wrapping flex row, the label claims its own full row (`flex: 1 0 100%`), and each endpoint re-flexes to share one line (a non-auto basis overrides the `inline-size: 100%` that `[data-time-field-input]` inherits from time-field.css). Root height 102 → 60px; no console errors; eidos-lint 0 invalid. Co-Authored-By: Claude Opus 4.8 (1M context) --- .../time-range-picker/time-range-picker.css | 21 ++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/uix/eidos/components/time-range-picker/time-range-picker.css b/src/uix/eidos/components/time-range-picker/time-range-picker.css index 696056296..39f68840e 100644 --- a/src/uix/eidos/components/time-range-picker/time-range-picker.css +++ b/src/uix/eidos/components/time-range-picker/time-range-picker.css @@ -16,9 +16,10 @@ --_time-field-accent-track: var(--color-primary-track); --_time-field-accent-text: var(--color-primary-text); - display: inline-flex; - flex-direction: column; - gap: var(--time-field-stack-gap); + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--time-field-stack-gap) var(--_time-field-gap); inline-size: 100%; min-inline-size: 0; color: var(--time-field-color); @@ -87,6 +88,20 @@ --_time-field-accent-text: var(--color-loss-text); } +/* ── Field row: label claims its own line; the paired endpoint inputs sit + side-by-side beneath it. The picker root is a wrapping flex row (mirrors + date-range-picker). Endpoint chrome (border / height / padding) comes from + `[data-time-field-input]` (time-field.css) — but that layer also sets + `inline-size: 100%`, which would make each endpoint claim the full row and + wrap. Re-flex them to share one line (non-auto basis overrides that width). */ +[data-time-range-field-label] { + flex: 1 0 100%; +} + +[data-time-range-field-input] { + flex: 1 1 7rem; +} + /* ── Trigger ─────────────────────────────────────────────────────────────── */ [data-time-range-picker-trigger] {