From 85a9882d26fe8a8d8a017cee98a1a540fbbe43d5 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Fri, 13 Mar 2026 01:22:28 +0800
Subject: [PATCH] Fix category chips appearing in wrong position
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../components/locations/LocationsPage.tsx    |  28 ++--
 frontend/src/components/people/PeoplePage.tsx |  42 +++--
 .../components/shared/CategoryFilterBar.tsx   | 145 +++++++++---------
 frontend/src/components/todos/TodosPage.tsx   |  28 ++--
 4 files changed, 116 insertions(+), 127 deletions(-)

diff --git a/frontend/src/components/locations/LocationsPage.tsx b/frontend/src/components/locations/LocationsPage.tsx
index 3174292..b52ba36 100644
--- a/frontend/src/components/locations/LocationsPage.tsx
+++ b/frontend/src/components/locations/LocationsPage.tsx
@@ -291,21 +291,19 @@ 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}
-            pinnedLabel="Frequent"
-            showPinned={showPinned}
-            onToggleAll={() => setActiveFilters([])}
-            onTogglePinned={() => setShowPinned((v) => !v)}
-            onToggleCategory={handleToggleCategory}
-            onSelectAllCategories={selectAllCategories}
-            onReorderCategories={reorderCategories}
-            searchValue={search}
-            onSearchChange={setSearch}
-          />
-        </div>
+        <CategoryFilterBar
+          categories={orderedCategories}
+          activeFilters={activeFilters}
+          pinnedLabel="Frequent"
+          showPinned={showPinned}
+          onToggleAll={() => setActiveFilters([])}
+          onTogglePinned={() => setShowPinned((v) => !v)}
+          onToggleCategory={handleToggleCategory}
+          onSelectAllCategories={selectAllCategories}
+          onReorderCategories={reorderCategories}
+          searchValue={search}
+          onSearchChange={setSearch}
+        />
 
         <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>
diff --git a/frontend/src/components/people/PeoplePage.tsx b/frontend/src/components/people/PeoplePage.tsx
index 9ab6e46..fab70ed 100644
--- a/frontend/src/components/people/PeoplePage.tsx
+++ b/frontend/src/components/people/PeoplePage.tsx
@@ -560,28 +560,26 @@ 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"
-            showPinned={showPinned}
-            categories={orderedCategories}
-            onToggleAll={toggleAll}
-            onTogglePinned={togglePinned}
-            onToggleCategory={toggleCategory}
-            onSelectAllCategories={selectAllCategories}
-            onReorderCategories={reorderCategories}
-            searchValue={search}
-            onSearchChange={setSearch}
-            extraPinnedFilters={[
-              {
-                label: 'Umbral',
-                isActive: showUmbralOnly,
-                onToggle: () => setShowUmbralOnly((p) => !p),
-              },
-            ]}
-          />
-        </div>
+        <CategoryFilterBar
+          activeFilters={activeFilters}
+          pinnedLabel="Favourites"
+          showPinned={showPinned}
+          categories={orderedCategories}
+          onToggleAll={toggleAll}
+          onTogglePinned={togglePinned}
+          onToggleCategory={toggleCategory}
+          onSelectAllCategories={selectAllCategories}
+          onReorderCategories={reorderCategories}
+          searchValue={search}
+          onSearchChange={setSearch}
+          extraPinnedFilters={[
+            {
+              label: 'Umbral',
+              isActive: showUmbralOnly,
+              onToggle: () => setShowUmbralOnly((p) => !p),
+            },
+          ]}
+        />
         <div className="relative" ref={addDropdownRef}>
           <div className="flex">
             <Button
diff --git a/frontend/src/components/shared/CategoryFilterBar.tsx b/frontend/src/components/shared/CategoryFilterBar.tsx
index 39de1b1..bef0428 100644
--- a/frontend/src/components/shared/CategoryFilterBar.tsx
+++ b/frontend/src/components/shared/CategoryFilterBar.tsx
@@ -146,90 +146,72 @@ 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
-          type="button"
-          onClick={onToggleAll}
-          aria-label="Show all"
-          className={pillBase}
-          style={isAllActive ? activePillStyle : undefined}
+    <div className="flex items-center gap-2 overflow-x-auto min-w-0 flex-1">
+      {/* All pill */}
+      <button
+        type="button"
+        onClick={onToggleAll}
+        aria-label="Show all"
+        className={pillBase}
+        style={isAllActive ? activePillStyle : undefined}
+      >
+        <span
+          className={
+            isAllActive ? '' : 'text-muted-foreground hover:text-foreground hover:bg-card-elevated'
+          }
         >
-          <span
-            className={
-              isAllActive ? '' : 'text-muted-foreground hover:text-foreground hover:bg-card-elevated'
-            }
-          >
-            All
+          All
+        </span>
+      </button>
+
+      {/* Pinned pill */}
+      <button
+        type="button"
+        onClick={onTogglePinned}
+        aria-label={`Toggle ${pinnedLabel}`}
+        className={pillBase}
+        style={showPinned ? activePillStyle : undefined}
+      >
+        <span className={showPinned ? '' : 'text-muted-foreground hover:text-foreground'}>
+          {pinnedLabel}
+        </span>
+      </button>
+
+      {/* Extra pinned filters (e.g. "Umbral") */}
+      {extraPinnedFilters.map((epf) => (
+        <button
+          key={epf.label}
+          type="button"
+          onClick={epf.onToggle}
+          aria-label={`Filter by ${epf.label}`}
+          className={pillBase}
+          style={epf.isActive ? activePillStyle : undefined}
+        >
+          <span className={epf.isActive ? '' : 'text-muted-foreground hover:text-foreground'}>
+            {epf.label}
           </span>
         </button>
+      ))}
 
-        {/* Pinned pill */}
+      {/* Categories pill */}
+      {categories.length > 0 && (
         <button
           type="button"
-          onClick={onTogglePinned}
-          aria-label={`Toggle ${pinnedLabel}`}
+          onClick={() => setOtherOpen((p) => !p)}
+          aria-label="Toggle category filters"
           className={pillBase}
-          style={showPinned ? activePillStyle : undefined}
+          style={otherOpen ? activePillStyle : undefined}
         >
-          <span className={showPinned ? '' : 'text-muted-foreground hover:text-foreground'}>
-            {pinnedLabel}
+          <span className={otherOpen ? '' : 'text-muted-foreground hover:text-foreground'}>
+            Categories
           </span>
         </button>
+      )}
 
-        {/* Extra pinned filters (e.g. "Umbral") */}
-        {extraPinnedFilters.map((epf) => (
-          <button
-            key={epf.label}
-            type="button"
-            onClick={epf.onToggle}
-            aria-label={`Filter by ${epf.label}`}
-            className={pillBase}
-            style={epf.isActive ? activePillStyle : undefined}
-          >
-            <span className={epf.isActive ? '' : 'text-muted-foreground hover:text-foreground'}>
-              {epf.label}
-            </span>
-          </button>
-        ))}
-
-        {/* Categories pill */}
-        {categories.length > 0 && (
-          <button
-            type="button"
-            onClick={() => setOtherOpen((p) => !p)}
-            aria-label="Toggle category filters"
-            className={pillBase}
-            style={otherOpen ? activePillStyle : undefined}
-          >
-            <span className={otherOpen ? '' : 'text-muted-foreground hover:text-foreground'}>
-              Categories
-            </span>
-          </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>
   );
 }
diff --git a/frontend/src/components/todos/TodosPage.tsx b/frontend/src/components/todos/TodosPage.tsx
index 699fc6d..c549ae5 100644
--- a/frontend/src/components/todos/TodosPage.tsx
+++ b/frontend/src/components/todos/TodosPage.tsx
@@ -168,21 +168,19 @@ 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"
-            showPinned={showCompleted}
-            categories={orderedCategories}
-            onToggleAll={toggleAll}
-            onTogglePinned={toggleCompleted}
-            onToggleCategory={toggleCategory}
-            onSelectAllCategories={selectAllCategories}
-            onReorderCategories={reorderCategories}
-            searchValue={search}
-            onSearchChange={setSearch}
-          />
-        </div>
+        <CategoryFilterBar
+          activeFilters={activeFilters}
+          pinnedLabel="Completed"
+          showPinned={showCompleted}
+          categories={orderedCategories}
+          onToggleAll={toggleAll}
+          onTogglePinned={toggleCompleted}
+          onToggleCategory={toggleCategory}
+          onSelectAllCategories={selectAllCategories}
+          onReorderCategories={reorderCategories}
+          searchValue={search}
+          onSearchChange={setSearch}
+        />
 
         <Button onClick={handleCreateNew} size="sm">
           <Plus className="h-4 w-4 md:mr-2" /><span className="hidden md:inline">Add Todo</span>