fix(filters): land templates/workflows/campaigns search inputs at 32px to match filter buttons

The Input atom defaults to h-9 (36px) while the size="sm" filter
Buttons in the same row are h-8 (32px). On /workflows the search bar
is alone in the row so the mismatch isn't visible. On /templates and
/campaigns the type/status filter buttons sit next to the search bar
and the row stretches to the Input's 36px, visibly offsetting the
buttons. Shrink the search Input to h-8 text-xs on all three pages
and add sm:items-center to the filter rows so the controls vertically
center.
This commit is contained in:
Tania Sanz
2026-05-16 21:17:01 +02:00
parent 53b631e6c6
commit 283f40239d
3 changed files with 5 additions and 5 deletions
+2 -2
View File
@@ -252,7 +252,7 @@ export default function CampaignsPage() {
</div>
{/* Search & Filters */}
<div className="flex flex-col sm:flex-row gap-3">
<div className="flex flex-col sm:flex-row sm:items-center gap-3">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400" />
<Input
@@ -260,7 +260,7 @@ export default function CampaignsPage() {
placeholder="Search campaigns..."
value={searchInput}
onChange={e => setSearchInput(e.target.value)}
className="pl-10 pr-10"
className="pl-10 pr-10 h-8 text-xs"
/>
{searchInput && (
<button
+2 -2
View File
@@ -90,7 +90,7 @@ export default function TemplatesPage() {
</div>
{/* Search & Filters */}
<div className="flex flex-col sm:flex-row gap-3">
<div className="flex flex-col sm:flex-row sm:items-center gap-3">
<div className="relative flex-1">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-neutral-400" />
<Input
@@ -98,7 +98,7 @@ export default function TemplatesPage() {
placeholder="Search templates..."
value={searchInput}
onChange={e => setSearchInput(e.target.value)}
className="pl-10 pr-10"
className="pl-10 pr-10 h-8 text-xs"
/>
{searchInput && (
<button
+1 -1
View File
@@ -117,7 +117,7 @@ export default function WorkflowsPage() {
placeholder="Search workflows..."
value={searchInput}
onChange={e => setSearchInput(e.target.value)}
className="pl-10 pr-10"
className="pl-10 pr-10 h-8 text-xs"
/>
{searchInput && (
<button