Fix registry filter input/button width ratio
Use Grid with col-span instead of flex to give the filter input 10/12 of the width and the Apply button only 2/12. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
@@ -96,26 +96,30 @@ def registry_header(filter_str: str, total_count: int) -> Div:
|
|||||||
Form(
|
Form(
|
||||||
# Label above the input row
|
# Label above the input row
|
||||||
FormLabel("Filter", _for="filter", cls="mb-2 block"),
|
FormLabel("Filter", _for="filter", cls="mb-2 block"),
|
||||||
Div(
|
Grid(
|
||||||
# Filter input - takes most of the width
|
# Filter input - takes most of the width
|
||||||
Input(
|
Input(
|
||||||
id="filter",
|
id="filter",
|
||||||
name="filter",
|
name="filter",
|
||||||
value=filter_str,
|
value=filter_str,
|
||||||
placeholder='species:duck status:alive location:"Strip 1"',
|
placeholder='species:duck status:alive location:"Strip 1"',
|
||||||
cls="uk-input flex-1",
|
cls="uk-input col-span-10",
|
||||||
),
|
),
|
||||||
# Apply button
|
# Buttons container
|
||||||
Button("Apply", type="submit", cls=f"{ButtonT.primary} px-4"),
|
Div(
|
||||||
# Clear button (only shown if filter is active)
|
Button("Apply", type="submit", cls=f"{ButtonT.primary} px-4"),
|
||||||
A(
|
# Clear button (only shown if filter is active)
|
||||||
"Clear",
|
A(
|
||||||
href="/registry",
|
"Clear",
|
||||||
cls="px-3 py-2 text-stone-400 hover:text-stone-200",
|
href="/registry",
|
||||||
)
|
cls="px-3 py-2 text-stone-400 hover:text-stone-200",
|
||||||
if filter_str
|
)
|
||||||
else None,
|
if filter_str
|
||||||
cls="flex gap-2 items-center",
|
else None,
|
||||||
|
cls="flex gap-2 col-span-2",
|
||||||
|
),
|
||||||
|
cols=12,
|
||||||
|
cls="gap-2 items-center",
|
||||||
),
|
),
|
||||||
action="/registry",
|
action="/registry",
|
||||||
method="get",
|
method="get",
|
||||||
|
|||||||
Reference in New Issue
Block a user