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

@@ -355,20 +355,21 @@ export function FilterBar() {
           </button>
         </div>
       </FilterPill>
-      </div>
 
-      {/* Clear-all — sits between the pill cluster and the search input
+      {/* Clear-all — borderless text affordance pinned next to the pill
-       *  on the right. Only renders when any filter is active so it
+       *  cluster on the right. Lives inside the pills container so it
-       *  doesn't take space in the resting state. */}
+       *  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. */}