From 2e2466bfa68ad3891a5454f342afba1baed4d9a7 Mon Sep 17 00:00:00 2001
From: Kyle Pope <kyle.a.pope@outlook.com>
Date: Wed, 25 Feb 2026 23:35:40 +0800
Subject: [PATCH] Fix People search: alignment, focus ring, and name matching

- Wrap CategoryFilterBar in flex-1 min-w-0 so search aligns right
- Add first_name, last_name, nickname to People search filter
- Add ring-inset to all header search inputs (People, Todos,
  Locations, Reminders, Calendar) to prevent focus ring clipping

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/calendar/CalendarPage.tsx  |  2 +-
 frontend/src/components/people/PeoplePage.tsx | 32 +++++++++++--------
 .../components/reminders/RemindersPage.tsx    |  2 +-
 .../components/shared/CategoryFilterBar.tsx   |  2 +-
 4 files changed, 21 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/calendar/CalendarPage.tsx b/frontend/src/components/calendar/CalendarPage.tsx
index 7fca355..8f68451 100644
--- a/frontend/src/components/calendar/CalendarPage.tsx
+++ b/frontend/src/components/calendar/CalendarPage.tsx
@@ -414,7 +414,7 @@ export default function CalendarPage() {
               onChange={(e) => setEventSearch(e.target.value)}
               onFocus={() => setSearchFocused(true)}
               onBlur={() => setTimeout(() => setSearchFocused(false), 200)}
-              className="w-52 h-8 pl-8 text-sm"
+              className="w-52 h-8 pl-8 text-sm ring-inset"
             />
             {searchFocused && searchResults.length > 0 && (
               <div className="absolute z-50 mt-1 w-72 right-0 rounded-md border bg-popover shadow-lg overflow-hidden">
diff --git a/frontend/src/components/people/PeoplePage.tsx b/frontend/src/components/people/PeoplePage.tsx
index 447968c..67b8113 100644
--- a/frontend/src/components/people/PeoplePage.tsx
+++ b/frontend/src/components/people/PeoplePage.tsx
@@ -237,6 +237,9 @@ export default function PeoplePage() {
       list = list.filter(
         (p) =>
           p.name.toLowerCase().includes(q) ||
+          p.first_name?.toLowerCase().includes(q) ||
+          p.last_name?.toLowerCase().includes(q) ||
+          p.nickname?.toLowerCase().includes(q) ||
           p.email?.toLowerCase().includes(q) ||
           p.mobile?.toLowerCase().includes(q) ||
           p.phone?.toLowerCase().includes(q) ||
@@ -404,20 +407,21 @@ export default function PeoplePage() {
       {/* Header */}
       <div className="border-b bg-card px-6 h-16 flex items-center gap-4 shrink-0">
         <h1 className="font-heading text-2xl font-bold tracking-tight">People</h1>
-        <CategoryFilterBar
-          activeFilters={activeFilters}
-          pinnedLabel="Favourites"
-          showPinned={showPinned}
-          categories={orderedCategories}
-          onToggleAll={toggleAll}
-          onTogglePinned={togglePinned}
-          onToggleCategory={toggleCategory}
-          onSelectAllCategories={selectAllCategories}
-          onReorderCategories={reorderCategories}
-          searchValue={search}
-          onSearchChange={setSearch}
-        />
-        <div className="flex-1" />
+        <div className="flex-1 min-w-0">
+          <CategoryFilterBar
+            activeFilters={activeFilters}
+            pinnedLabel="Favourites"
+            showPinned={showPinned}
+            categories={orderedCategories}
+            onToggleAll={toggleAll}
+            onTogglePinned={togglePinned}
+            onToggleCategory={toggleCategory}
+            onSelectAllCategories={selectAllCategories}
+            onReorderCategories={reorderCategories}
+            searchValue={search}
+            onSearchChange={setSearch}
+          />
+        </div>
         <Button onClick={() => setShowForm(true)} size="sm" aria-label="Add person">
           <Plus className="mr-2 h-4 w-4" />
           Add Person
diff --git a/frontend/src/components/reminders/RemindersPage.tsx b/frontend/src/components/reminders/RemindersPage.tsx
index 95613e8..7fdb1b6 100644
--- a/frontend/src/components/reminders/RemindersPage.tsx
+++ b/frontend/src/components/reminders/RemindersPage.tsx
@@ -131,7 +131,7 @@ export default function RemindersPage() {
             placeholder="Search..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-            className="w-52 h-8 pl-8 text-sm"
+            className="w-52 h-8 pl-8 text-sm ring-inset"
           />
         </div>
 
diff --git a/frontend/src/components/shared/CategoryFilterBar.tsx b/frontend/src/components/shared/CategoryFilterBar.tsx
index bee958d..892a926 100644
--- a/frontend/src/components/shared/CategoryFilterBar.tsx
+++ b/frontend/src/components/shared/CategoryFilterBar.tsx
@@ -251,7 +251,7 @@ export default function CategoryFilterBar({
           placeholder="Search..."
           value={searchValue}
           onChange={(e) => onSearchChange(e.target.value)}
-          className="w-52 h-8 pl-8 text-sm"
+          className="w-52 h-8 pl-8 text-sm ring-inset"
           aria-label="Search"
         />
       </div>