From b20f670e500d393b3c354f19e02e17f6ebd1a8e8 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 24 Apr 2026 16:58:21 +0000 Subject: [PATCH 1/2] fix(filter-bar): widen mobile search input and fix dark-mode text - Increase search width on xs/sm so the `.find(_)` placeholder and typed query are fully visible on small screens - Explicitly set fontFamily and fontSize on the input element so it uses the MonoLisa stack instead of the browser default - Set input color to var(--ink) so typed text remains readable in dark mode (the MUI palette text.primary is hard-coded to the light-mode ink color) --- app/src/components/FilterBar.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/app/src/components/FilterBar.tsx b/app/src/components/FilterBar.tsx index 66cf82c17c..f42e657501 100644 --- a/app/src/components/FilterBar.tsx +++ b/app/src/components/FilterBar.tsx @@ -434,8 +434,8 @@ export function FilterBar({ gap: 0.5, px: isSearchExpanded ? 1.5 : 0, height: 32, - width: isSearchExpanded ? { xs: 80, sm: 160, md: 'auto' } : 32, - minWidth: isSearchExpanded ? { xs: 80, sm: 160, md: 120 } : 32, + width: isSearchExpanded ? { xs: 220, sm: 200, md: 'auto' } : 32, + minWidth: isSearchExpanded ? { xs: 220, sm: 180, md: 120 } : 32, border: isSearchExpanded ? '1px dashed var(--ink-muted)' : 'none', borderRadius: '16px', bgcolor: isDropdownOpen ? 'var(--bg-elevated)' : 'transparent', @@ -495,8 +495,12 @@ export function FilterBar({ transition: 'all 0.2s ease', fontFamily: typography.fontFamily, fontSize: fontSize.base, + color: 'var(--ink)', '& input': { padding: 0, + fontFamily: typography.fontFamily, + fontSize: fontSize.base, + color: 'var(--ink)', '&::placeholder': { color: semanticColors.mutedText, opacity: 1, From 8ac7b66d8cf4529f4e871a084eafdec15ab4ccea Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 24 Apr 2026 20:51:05 +0000 Subject: [PATCH 2/2] fix(filter-bar): make search widths monotonic across breakpoints Addresses copilot review feedback: previous values had the input shrinking from xs (220px) to sm (200px), which is counterintuitive. Use 220px for both xs and sm so width only grows with screen size. --- app/src/components/FilterBar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/src/components/FilterBar.tsx b/app/src/components/FilterBar.tsx index f42e657501..d3452d2e53 100644 --- a/app/src/components/FilterBar.tsx +++ b/app/src/components/FilterBar.tsx @@ -434,8 +434,8 @@ export function FilterBar({ gap: 0.5, px: isSearchExpanded ? 1.5 : 0, height: 32, - width: isSearchExpanded ? { xs: 220, sm: 200, md: 'auto' } : 32, - minWidth: isSearchExpanded ? { xs: 220, sm: 180, md: 120 } : 32, + width: isSearchExpanded ? { xs: 220, sm: 220, md: 'auto' } : 32, + minWidth: isSearchExpanded ? { xs: 220, sm: 220, md: 200 } : 32, border: isSearchExpanded ? '1px dashed var(--ink-muted)' : 'none', borderRadius: '16px', bgcolor: isDropdownOpen ? 'var(--bg-elevated)' : 'transparent',