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>
This commit is contained in:
Kyle 2026-02-25 23:35:40 +08:00
parent 05d04c131e
commit 2e2466bfa6
4 changed files with 21 additions and 17 deletions

View File

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

View File

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

View File

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

View File

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