From 4652f1ff5573409a0d2280d04521a28ca057cb3f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luk=C3=A1=C5=A1=20Kucharczyk?= Date: Sat, 20 Jun 2026 08:22:40 +0200 Subject: [PATCH] Unify input font size and padding (text-sm, px-3 py-2.5) Inputs rendered at different sizes: the SearchSelect was 54px tall with a 16px font (the wrapper's p-2 and the inner box's forms-plugin padding stacked, and the wrapper had no text-sm), and the string-criterion filter input had no text-sm (16px) with p-2. Native inputs are 42px / 14px / px-3 py-2.5. Align both to the native size: - SearchSelect wrapper supplies px-3 py-2.5 + text-sm and the inner search box zeroes its own padding (p-0), so the field is one 42px row like an input. - String filter input gets text-sm + px-3 py-2.5. Co-Authored-By: Claude Opus 4.8 --- common/components/filters.py | 3 ++- common/components/search_select.py | 7 +++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/common/components/filters.py b/common/components/filters.py index deec900..038ff45 100644 --- a/common/components/filters.py +++ b/common/components/filters.py @@ -1572,7 +1572,8 @@ def StringFilter( ("placeholder", placeholder), ( "class", - "w-full rounded-base border border-default-medium p-2 " + # text-sm + px-3 py-2.5 match every other input (canonical size). + "w-full rounded-base border border-default-medium px-3 py-2.5 text-sm " "bg-neutral-secondary-medium text-body " "focus:border-brand focus:ring-brand " # No transition-* here: with transition-all the border-color animated diff --git a/common/components/search_select.py b/common/components/search_select.py index bfbc12c..532012d 100644 --- a/common/components/search_select.py +++ b/common/components/search_select.py @@ -73,8 +73,11 @@ LabeledOption = tuple[str, str] # via :has() — the same opacity-50 a disabled native input uses (see # _DISABLED_CONTROL in games/forms.py), so the two look identical. Callers only # toggle the control's `disabled`, never styles. +# px-3 py-2.5 text-sm match a native input (INPUT_CLASS); the wrapper supplies +# the field padding, and the inner search box zeroes its own (p-0) so the two +# don't stack into a too-tall field. _CONTAINER_CLASS = ( - "relative flex flex-wrap items-center gap-1 p-2 rounded-base " + "relative flex flex-wrap items-center gap-1 px-3 py-2.5 rounded-base text-sm " "bg-neutral-secondary-medium border border-default-medium " "focus-within:border-brand focus-within:ring-1 focus-within:ring-brand " f"{DISABLED_WITHIN_CLASS}" @@ -84,7 +87,7 @@ _PILLS_CLASS = "contents" # the whole widget stays consistent (the wrapper handles the faded look via # has-[:disabled]:opacity-50). _SEARCH_CLASS = ( - "flex-1 min-w-[8rem] border-0 bg-transparent text-sm text-heading " + "flex-1 min-w-[8rem] border-0 p-0 bg-transparent text-sm text-heading " "focus:ring-0 focus:outline-hidden placeholder:text-body " "disabled:cursor-not-allowed" )