lukas/timetracker
1
0
Fork 0
Code Issues 16 Pull Requests Actions Packages Projects 1 Releases 23 Wiki Activity

Unify input font size and padding (text-sm, px-3 py-2.5)

Browse Source 
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:
Lukáš Kucharczyk
2026-06-20 08:22:40 +02:00
parent 84925d4406
commit 4652f1ff55
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
common/components/filters.py
+2 -1
View File
@@ -1572,7 +1572,8 @@ def StringFilter(
("placeholder", placeholder), ("placeholder", placeholder),
( (
"class", "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 " "bg-neutral-secondary-medium text-body "
"focus:border-brand focus:ring-brand " "focus:border-brand focus:ring-brand "
# No transition-* here: with transition-all the border-color animated # No transition-* here: with transition-all the border-color animated
common/components/search_select.py
+5 -2
View File
@@ -73,8 +73,11 @@ LabeledOption = tuple[str, str]
# via :has() — the same opacity-50 a disabled native input uses (see # 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 # _DISABLED_CONTROL in games/forms.py), so the two look identical. Callers only
# toggle the control's `disabled`, never styles. # 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 = ( _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 " "bg-neutral-secondary-medium border border-default-medium "
"focus-within:border-brand focus-within:ring-1 focus-within:ring-brand " "focus-within:border-brand focus-within:ring-1 focus-within:ring-brand "
f"{DISABLED_WITHIN_CLASS}" f"{DISABLED_WITHIN_CLASS}"
@@ -84,7 +87,7 @@ _PILLS_CLASS = "contents"
# the whole widget stays consistent (the wrapper handles the faded look via # the whole widget stays consistent (the wrapper handles the faded look via
# has-[:disabled]:opacity-50). # has-[:disabled]:opacity-50).
_SEARCH_CLASS = ( _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 " "focus:ring-0 focus:outline-hidden placeholder:text-body "
"disabled:cursor-not-allowed" "disabled:cursor-not-allowed"
) )