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 <noreply@anthropic.com>
This commit is contained in:
@@ -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"
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user