From 5a7b2e882ecf9ded8196b2f1d90e649561938ded Mon Sep 17 00:00:00 2001
From: Sergey Kozyrenko <sirozha_blr@tut.by>
Date: Tue, 19 May 2026 17:55:54 +0700
Subject: [PATCH] style(frontend): align InputSearch sizing with size='sm'
 button geometry
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`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>
---
 frontend/src/components/ui/input-search.tsx | 22 ++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/ui/input-search.tsx b/frontend/src/components/ui/input-search.tsx
index 17240e90..bf707821 100644
--- a/frontend/src/components/ui/input-search.tsx
+++ b/frontend/src/components/ui/input-search.tsx
@@ -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}