Fix category chips appearing in wrong position

Category chips were rendering as a separate flex row that got pushed to the
far right (between search and add button). Flatten the layout so chips appear
inline immediately after the Categories toggle pill, separated by a divider.

Remove redundant wrapper divs from TodosPage, PeoplePage, LocationsPage —
CategoryFilterBar now owns its own flex-1 sizing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/src/components/locations/LocationsPage.tsx

@@ -291,7 +291,6 @@ 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}
@@ -305,7 +304,6 @@ 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,7 +560,6 @@ 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"
@@ -581,7 +580,6 @@ export default function PeoplePage() {
             },
           ]}
         />
-        </div>
         <div className="relative" ref={addDropdownRef}>
           <div className="flex">
             <Button

frontend/src/components/shared/CategoryFilterBar.tsx

@@ -146,8 +146,6 @@ 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
@@ -210,26 +208,10 @@ export default function CategoryFilterBar({
         </button>
       )}
 
-        {/* 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 */}
+      {/* Expanded category chips — inline after Categories pill */}
       {categories.length > 0 && otherOpen && (
-        <div className="flex items-center gap-1.5 overflow-x-auto pb-1 md:pb-0">
-          {/* "All" chip inside categories — non-draggable */}
+        <>
+          <div className="w-px h-5 bg-border shrink-0" />
           {onSelectAllCategories && (
             <button
               type="button"
@@ -250,8 +232,6 @@ export default function CategoryFilterBar({
               </span>
             </button>
           )}
-
-          {/* Draggable category chips */}
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
@@ -272,8 +252,23 @@ export default function CategoryFilterBar({
               ))}
             </SortableContext>
           </DndContext>
-        </div>
+        </>
       )}
+
+      {/* 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,7 +168,6 @@ 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"
@@ -182,7 +181,6 @@ 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>