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:
@@ -150,6 +150,10 @@ export const SearchBar = React.forwardRef<HTMLDivElement, SearchBarProps>(
|
||||
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<HTMLDivElement, SearchBarProps>(
|
||||
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}
|
||||
</Button>
|
||||
|
||||
Reference in New Issue
Block a user