From c4e651ac6e447295ed0b8a3f1cd8d62a91212d48 Mon Sep 17 00:00:00 2001 From: Richie Date: Wed, 25 Mar 2026 21:13:17 +1100 Subject: [PATCH] =?UTF-8?q?Fix=20SearchBar=20=E2=80=94=20align=20button=20?= =?UTF-8?q?height=20with=20input,=20tighten=20icon=20gap?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Explicit button height via input token CSS vars for pixel-perfect alignment - Reduced InputAdornment start margin (mr: 0.5) to bring search icon closer to text Co-Authored-By: Claude Opus 4.6 (1M context) --- src/components/molecules/SearchBar/SearchBar.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/molecules/SearchBar/SearchBar.tsx b/src/components/molecules/SearchBar/SearchBar.tsx index 5361cd1..02c3bf4 100644 --- a/src/components/molecules/SearchBar/SearchBar.tsx +++ b/src/components/molecules/SearchBar/SearchBar.tsx @@ -150,6 +150,10 @@ export const SearchBar = React.forwardRef( inputProps={{ 'aria-label': ariaLabel, }} + sx={{ + // Tighten the gap between search icon and text + '& .MuiInputAdornment-positionStart': { mr: 0.5 }, + }} /> {showButton && ( @@ -159,7 +163,11 @@ export const SearchBar = React.forwardRef( onClick={handleSubmit} disabled={disabled || !value.trim()} loading={loading} - sx={{ flexShrink: 0 }} + sx={{ + flexShrink: 0, + // Explicit height to match input — FormControl wrapper can offset alignment + height: size === 'medium' ? 'var(--fa-input-height-md)' : 'var(--fa-input-height-sm)', + }} > {buttonLabel}