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:
parent
05d04c131e
commit
2e2466bfa6
@ -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">
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user