From dc1781128d5d858e0f12904cfc0d74ba4489cd61 Mon Sep 17 00:00:00 2001 From: Igor Fedoronchuk Date: Tue, 13 Oct 2026 17:07:17 +0200 Subject: [PATCH] Lay date-range filters out with flexbox so long labels don't wrap the inputs The date-only range filter (two input.datepicker fields) gets no width from the base CSS, so the inputs relied on their size=12 intrinsic width and only lined up by luck; the label's float:right 'Set range' link leaked into the input band on a longer label and pushed the 'To' field onto a second line. Flexbox lays the label on its own row and lets the two inputs share the next, immune to the float. Consumers previously each carried their own fix (one with flexbox, one with calc widths + !important); this owns it for all of them. --- .../stylesheets/wigu/active_admin_theme.scss | 22 +++++++++++++++++++ 1 file changed, 22 insertions(+) diff --git a/app/assets/stylesheets/wigu/active_admin_theme.scss b/app/assets/stylesheets/wigu/active_admin_theme.scss index a74f9dc..e5fb5b9 100644 --- a/app/assets/stylesheets/wigu/active_admin_theme.scss +++ b/app/assets/stylesheets/wigu/active_admin_theme.scss @@ -1601,6 +1601,28 @@ form.filter_form .filter_form_field.filter_date_range .seperator { width: 10px; } +// Date-only range filters (jQuery-UI datepicker, input.datepicker) get no width +// from the base, so the two inputs fall back to their size="12" intrinsic width +// and line up side by side only by luck; the label's float:right "Set range" +// link then leaks into the input band on a longer label and bumps the "To" +// input onto a second line. Lay the field out with flexbox: the label takes a +// full row, the two inputs share the next, immune to the float. +form.filter_form .filter_form_field.filter_date_range { + display: flex; + flex-wrap: wrap; + + > label { flex: 0 0 100%; } + + input.datepicker { + box-sizing: border-box; + flex: 1 1 0; + min-width: 0; + margin: 0; + + & + input.datepicker { margin-left: 6px; } + } +} + //filter select box border radius .filter_form_field select { border-radius: 3px;