style(frontend): align InputSearch sizing with size='sm' button geometry

`HeaderButton` defaults to `size='sm'` (h-8 px-3 rounded-md text-xs)
and pages mount InputSearch right next to it. The component previously
shipped with h-7 / icon-xs (28 px) so the icon-only trigger sat a
notch shorter than its sibling action — visible in the knowledges
header.

Bumped the group to h-8, the trigger to size='icon-sm', and pinned
the inner input to h-8 (it inherits `Input`'s default h-9 otherwise,
which pokes 4 px past the bordered group). Dropped the duplicate
negative margins on the button — the addon's
`has-[>button]:ml-[-0.45rem]` already handles flush-left alignment
when expanded; only the collapsed state needs the explicit `-mx-1.5`
to claw back the addon's default padding around the lone icon.

Verified: trigger 32×32, group 32 px, input 32 px, all matching the
neighbouring `HeaderButton` baseline.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Sergey Kozyrenko
2026-05-19 17:55:54 +07:00
co-authored by Claude Opus 4.7
parent 31a7f34c0f
commit 5a7b2e882e
+17 -5
View File
@@ -139,7 +139,10 @@ export function InputSearch({
return (
<InputGroup
className={cn(
'h-7 w-auto shrink-0 py-1 transition-[background-color,border-color,box-shadow] duration-100',
// Mirror the `size="sm"` button geometry used by `HeaderButton`
// so the search control lines up vertically with sibling
// actions in any page header (h-8 / rounded-md / px-3).
'h-8 w-auto shrink-0 transition-[background-color,border-color,box-shadow] duration-100',
isExpanded
? 'border-input dark:bg-input/30 shadow-xs'
: 'border-transparent shadow-none dark:bg-transparent',
@@ -148,7 +151,12 @@ export function InputSearch({
>
<InputGroupAddon
align="inline-start"
className={cn(!isExpanded && 'mr-1.5 -ml-1.5')}
// Collapsed trigger sits flush with the addon edge — the
// addon's default `pl-3` would otherwise add a 12 px gutter
// that wastes header real estate when only the icon is on
// screen. `has-[>button]:ml-[-0.45rem]` already handles the
// analogous adjustment when expanded.
className={cn(!isExpanded && '-mx-1.5')}
>
{isExpanded ? (
<Search
@@ -158,9 +166,8 @@ export function InputSearch({
) : (
<InputGroupButton
aria-label={ariaLabel}
className="text-foreground -mx-1.5 size-7"
onClick={expand}
size="icon-xs"
size="icon-sm"
type="button"
variant="ghost"
>
@@ -179,7 +186,12 @@ export function InputSearch({
>
<InputGroupInput
aria-label={ariaLabel}
className="min-w-0 py-0 pl-2"
// `Input` defaults to `h-9` — that's 4 px taller than our
// `h-8` group, which would let the input edge poke past
// the bordered group container. Pin it to the group's
// height; the `min-w-0` is to keep flexbox from
// bottoming out on the implicit `min-content` width.
className="h-8 min-w-0 py-0 pl-2"
onChange={(event) => onSearchChange(event.target.value)}
onKeyDown={handleInputKeyDown}
placeholder={placeholder}