diff --git a/frontend/src/components/filter/FilterBar.tsx b/frontend/src/components/filter/FilterBar.tsx
index d220a0a..1d4040e 100644
--- a/frontend/src/components/filter/FilterBar.tsx
+++ b/frontend/src/components/filter/FilterBar.tsx
@@ -128,42 +128,8 @@ export function FilterBar() {
     // clear-all button can stretch the bar vertically. The fixed h-11
     // matches the h-7 pills + 8px symmetric vertical padding.
     <div className="flex h-11 items-center gap-3 border-b border-border bg-surface px-3 py-0">
-      {/* Search — left of the pill cluster. Same id as before so the
-       *  global "/" focus shortcut still finds it. */}
-      <div className="relative w-56 flex-shrink-0">
-        <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-text-muted" />
-        <input
-          id="topbar-search"
-          type="text"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === 'Escape') {
-              setSearchQuery('')
-              setStoreQ('')
-              e.currentTarget.blur()
-            }
-          }}
-          placeholder="Search photos…"
-          className="w-full rounded-full border border-border bg-surface-2 py-1 pl-8 pr-7 text-xs text-text placeholder-text-muted focus:border-primary focus:outline-none"
-        />
-        {searchQuery && (
-          <button
-            onClick={() => {
-              setSearchQuery('')
-              setStoreQ('')
-            }}
-            className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-full p-0.5 text-text-muted hover:bg-surface-offset hover:text-text"
-            title="Clear search (Esc)"
-            aria-label="Clear search"
-          >
-            <X className="h-3 w-3" />
-          </button>
-        )}
-      </div>
-
-      {/* Pills — centered, scroll horizontally if they overflow. */}
-      <div className="flex flex-1 items-center justify-center gap-1.5 overflow-x-auto">
+      {/* Pills — left side, scroll horizontally if they overflow. */}
+      <div className="flex min-w-0 flex-1 items-center gap-1.5 overflow-x-auto">
       {/* Date */}
       <FilterPill
         label="Date"
@@ -391,18 +357,49 @@ export function FilterBar() {
       </FilterPill>
       </div>
 
-      {/* Right slot — fixed-width so the pill cluster stays perfectly
-       *  centered in the bar regardless of whether Clear-all is visible.
-       *  Width matches the search input on the left for symmetric
-       *  framing. The button itself is right-aligned within the slot. */}
-      <div className="flex w-56 flex-shrink-0 justify-end">
-        {anyActive && (
+      {/* 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. */}
+      {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"
+          title="Clear all filters in this section"
+        >
+          Clear all
+        </button>
+      )}
+
+      {/* Search — pinned to the right edge of the bar. Same id as before
+       *  so the global "/" focus shortcut still finds it. */}
+      <div className="relative w-56 flex-shrink-0">
+        <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-text-muted" />
+        <input
+          id="topbar-search"
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Escape') {
+              setSearchQuery('')
+              setStoreQ('')
+              e.currentTarget.blur()
+            }
+          }}
+          placeholder="Search photos…"
+          className="w-full rounded-full border border-border bg-surface-2 py-1 pl-8 pr-7 text-xs text-text placeholder-text-muted focus:border-primary focus:outline-none"
+        />
+        {searchQuery && (
           <button
-            onClick={clearAll}
-            className="flex h-7 items-center whitespace-nowrap rounded-full border border-border px-2.5 text-xs text-text-muted hover:bg-surface-2 hover:text-text"
-            title="Clear all filters in this section"
+            onClick={() => {
+              setSearchQuery('')
+              setStoreQ('')
+            }}
+            className="absolute right-1.5 top-1/2 -translate-y-1/2 rounded-full p-0.5 text-text-muted hover:bg-surface-offset hover:text-text"
+            title="Clear search (Esc)"
+            aria-label="Clear search"
           >
-            Clear all
+            <X className="h-3 w-3" />
           </button>
         )}
       </div>