From 8db424250327d57bf3784ee83669b2f2bef6e5ca Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Wed, 8 Apr 2026 21:24:52 +0200
Subject: [PATCH] fix: clear-all sits next to filters with a borderless style

Move the Clear-all button inside the pills flex container so it shares
the cluster's gap and reads as the rightmost item of the filter group
instead of floating between filters and search. Drop the bordered
pill styling for a flat text-button (underline on hover) so it doesn't
look like another active filter.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/filter/FilterBar.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/filter/FilterBar.tsx b/frontend/src/components/filter/FilterBar.tsx
index 1d4040e..ca70ebc 100644
--- a/frontend/src/components/filter/FilterBar.tsx
+++ b/frontend/src/components/filter/FilterBar.tsx
@@ -355,20 +355,21 @@ export function FilterBar() {
           </button>
         </div>
       </FilterPill>
-      </div>
 
-      {/* Clear-all — sits between the pill cluster and the search input
-       *  on the right. Only renders when any filter is active so it
-       *  doesn't take space in the resting state. */}
+      {/* Clear-all — borderless text affordance pinned next to the pill
+       *  cluster on the right. Lives inside the pills container so it
+       *  shares the same flex group and gap and reads as "another
+       *  pill". Only renders when any filter is active. */}
       {anyActive && (
         <button
           onClick={clearAll}
-          className="flex h-7 flex-shrink-0 items-center whitespace-nowrap rounded-full border border-border px-2.5 text-xs text-text-muted hover:bg-surface-2 hover:text-text"
+          className="ml-1 flex h-7 flex-shrink-0 items-center whitespace-nowrap px-1 text-xs text-text-muted underline-offset-2 hover:text-text hover:underline"
           title="Clear all filters in this section"
         >
           Clear all
         </button>
       )}
+      </div>
 
       {/* Search — pinned to the right edge of the bar. Same id as before
        *  so the global "/" focus shortcut still finds it. */}