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>

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">

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,6 +407,7 @@ 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>
+        <div className="flex-1 min-w-0">
           <CategoryFilterBar
             activeFilters={activeFilters}
             pinnedLabel="Favourites"
@@ -417,7 +421,7 @@ export default function PeoplePage() {
             searchValue={search}
             onSearchChange={setSearch}
           />
-        <div className="flex-1" />
+        </div>
         <Button onClick={() => setShowForm(true)} size="sm" aria-label="Add person">
           <Plus className="mr-2 h-4 w-4" />
           Add Person

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>
 

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>