frontend/src/components/locations/LocationsPage.tsx

@@ -291,6 +291,7 @@ export default function LocationsPage() {
       <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
         <h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">Locations</h1>
 
+        <div className="w-full md:flex-1 md:w-auto min-w-0 order-last md:order-none">
           <CategoryFilterBar
             categories={orderedCategories}
             activeFilters={activeFilters}
@@ -304,6 +305,7 @@ export default function LocationsPage() {
             searchValue={search}
             onSearchChange={setSearch}
           />
+        </div>
 
         <Button onClick={() => setShowForm(true)} size="sm" aria-label="Add location">
           <Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">Add Location</span>

frontend/src/components/people/PeoplePage.tsx

@@ -560,6 +560,7 @@ export default function PeoplePage() {
       {/* Header */}
       <div className="border-b bg-card px-4 md:px-6 min-h-[4rem] flex items-center gap-2 md:gap-4 flex-wrap py-2 md:py-0 md:h-16 md:flex-nowrap shrink-0">
         <h1 className="font-heading text-xl md:text-2xl font-bold tracking-tight">People</h1>
+        <div className="w-full md:flex-1 md:w-auto min-w-0 order-last md:order-none">
           <CategoryFilterBar
             activeFilters={activeFilters}
             pinnedLabel="Favourites"
@@ -580,6 +581,7 @@ export default function PeoplePage() {
               },
             ]}
           />
+        </div>
         <div className="relative" ref={addDropdownRef}>
           <div className="flex">
             <Button

frontend/src/components/shared/CategoryFilterBar.tsx

@@ -146,6 +146,8 @@ export default function CategoryFilterBar({
   };
 
   return (
+    <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-2">
+      {/* Top row: pills + search */}
       <div className="flex items-center gap-2 overflow-x-auto min-w-0 flex-1">
         {/* All pill */}
         <button
@@ -208,10 +210,26 @@ export default function CategoryFilterBar({
           </button>
         )}
 
-      {/* Expanded category chips — inline after Categories pill */}
+        {/* Search */}
+        <div className="flex-1" />
+        <div className="relative shrink-0">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
+          <Input
+            ref={searchInputRef}
+            type="search"
+            placeholder="Search..."
+            value={searchValue}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="w-28 sm:w-52 h-8 pl-8 text-sm ring-inset"
+            aria-label="Search"
+          />
+        </div>
+      </div>
+
+      {/* Expanded categories row — shows below on mobile, inline on desktop */}
       {categories.length > 0 && otherOpen && (
-        <>
-          <div className="w-px h-5 bg-border shrink-0" />
+        <div className="flex items-center gap-1.5 overflow-x-auto pb-1 md:pb-0">
+          {/* "All" chip inside categories — non-draggable */}
           {onSelectAllCategories && (
             <button
               type="button"
@@ -232,6 +250,8 @@ export default function CategoryFilterBar({
               </span>
             </button>
           )}
+
+          {/* Draggable category chips */}
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
@@ -252,23 +272,8 @@ export default function CategoryFilterBar({
               ))}
             </SortableContext>
           </DndContext>
-        </>
-      )}
-
-      {/* Search — pushed to the right */}
-      <div className="flex-1" />
-      <div className="relative shrink-0">
-        <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-3.5 w-3.5 text-muted-foreground pointer-events-none" />
-        <Input
-          ref={searchInputRef}
-          type="search"
-          placeholder="Search..."
-          value={searchValue}
-          onChange={(e) => onSearchChange(e.target.value)}
-          className="w-28 sm:w-52 h-8 pl-8 text-sm ring-inset"
-          aria-label="Search"
-        />
         </div>
+      )}
     </div>
   );
 }

frontend/src/components/todos/TodosPage.tsx

@@ -168,6 +168,7 @@ export default function TodosPage() {
         </div>
 
         {/* Category filter bar (All + Completed + Categories with drag) */}
+        <div className="w-full md:flex-1 md:w-auto min-w-0 order-last md:order-none">
           <CategoryFilterBar
             activeFilters={activeFilters}
             pinnedLabel="Completed"
@@ -181,6 +182,7 @@ export default function TodosPage() {
             searchValue={search}
             onSearchChange={setSearch}
           />
+        </div>
 
         <Button onClick={handleCreateNew} size="sm">
           <Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">Add Todo</span>