From 8f76babdd3362911c5efbe431aaa9961da758515 Mon Sep 17 00:00:00 2001 From: Cristian Magherusan-Stanciu Date: Mon, 8 Jun 2026 09:14:02 -0700 Subject: [PATCH] style(frontend/recs): align cost-period selector inline with toolbar controls The recommendations filter-status bar is flex/align-center, but the `.cost-period-selector-wrapper` span had no CSS, so the small "Show costs:" label aligned to the baseline of the taller base-styled select and appeared stacked above it. Make the wrapper an inline-flex (label + select vertically centered) and size the select to match the bar buttons, so the count, Expand all, "Show costs: " and Columns all sit on one line. --- frontend/src/styles/components.css | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css index 92430ee5f..f053ba47f 100644 --- a/frontend/src/styles/components.css +++ b/frontend/src/styles/components.css @@ -708,6 +708,24 @@ th .column-filter-btn.active { font-size: 0.85em; color: var(--cudly-text-muted); } +/* "Show costs: " selector: keep the label and select inline and + vertically centered so the control sits on the same line as the count, + Expand all and Columns, instead of the small label stacking above the + taller select (the base `select` style is bigger than the bar's buttons). */ +.recommendations-filter-status .cost-period-selector-wrapper { + display: inline-flex; + align-items: center; + gap: 0.4rem; + white-space: nowrap; +} +.recommendations-filter-status .cost-period-selector-label { + color: var(--cudly-text-muted); +} +.recommendations-filter-status .cost-period-select { + padding: 0.25rem 0.6rem; + font-size: 0.85em; + line-height: 1.2; +} .recommendations-filter-status .clear-filters { background: var(--cudly-info-bg); border: 1px solid #a9c7f5;