From 283f40239dcc81e78d35b39cb9b31f97b435b8d7 Mon Sep 17 00:00:00 2001
From: Tania Sanz <info@taniasanz.com>
Date: Sat, 16 May 2026 21:17:01 +0200
Subject: [PATCH] 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.
---
 apps/web/src/pages/campaigns/index.tsx | 4 ++--
 apps/web/src/pages/templates/index.tsx | 4 ++--
 apps/web/src/pages/workflows/index.tsx | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/pages/campaigns/index.tsx b/apps/web/src/pages/campaigns/index.tsx
index e301834..ef2c51f 100644
--- a/apps/web/src/pages/campaigns/index.tsx
+++ b/apps/web/src/pages/campaigns/index.tsx
@@ -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
diff --git a/apps/web/src/pages/templates/index.tsx b/apps/web/src/pages/templates/index.tsx
index 963fb4a..62654db 100644
--- a/apps/web/src/pages/templates/index.tsx
+++ b/apps/web/src/pages/templates/index.tsx
@@ -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
diff --git a/apps/web/src/pages/workflows/index.tsx b/apps/web/src/pages/workflows/index.tsx
index f868235..5ec7929 100644
--- a/apps/web/src/pages/workflows/index.tsx
+++ b/apps/web/src/pages/workflows/index.tsx
@@ -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