Fix SearchBar — align button height with input, tighten icon gap

- 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) <noreply@anthropic.com>
This commit is contained in:
2026-03-25 21:13:17 +11:00
parent 22af0378af
commit c4e651ac6e

View File

@@ -150,6 +150,10 @@ export const SearchBar = React.forwardRef<HTMLDivElement, SearchBarProps>(
inputProps={{ inputProps={{
'aria-label': ariaLabel, 'aria-label': ariaLabel,
}} }}
sx={{
// Tighten the gap between search icon and text
'& .MuiInputAdornment-positionStart': { mr: 0.5 },
}}
/> />
{showButton && ( {showButton && (
@@ -159,7 +163,11 @@ export const SearchBar = React.forwardRef<HTMLDivElement, SearchBarProps>(
onClick={handleSubmit} onClick={handleSubmit}
disabled={disabled || !value.trim()} disabled={disabled || !value.trim()}
loading={loading} 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} {buttonLabel}
</Button> </Button>