fix(site/src/components/MultiSelectCombobox): match Input height when empty (#28409)

The empty `MultiSelectCombobox` rendered ~46px tall next to the fixed
40px `Input`, breaking form rows that place them side by side, most
visibly the IdP sync mapping fields (`/organizations/{org}/idp-sync`,
IdP org sync, template/parameter forms).

## Root cause

#27821 removed MUI's `CssBaseline` and enabled Tailwind preflight
(`corePlugins.preflight` was previously `false`). Preflight sets `input
{ line-height: inherit }`, so the combobox's inner cmdk input started
inheriting the wrapper's `text-sm` 24px line instead of the browser
default. With its `py-2.5` padding the empty combobox computed to 24 +
20 + 2 = 46px, while `Input` stays pinned at `h-10`.

This is a sibling of the `ModelSelector` regressions fixed in #28399,
but in the shared combobox primitive, so that fix could not reach these
pages.

## Fix

- Pin the inner cmdk input to `leading-5` and reduce the empty-state
padding to `py-2` (20 + 16 = 36px row).
- Make the wrapper a `flex flex-col justify-center` so the row centers
within `min-h-10`, giving exactly 40px when empty while the selected
state still grows with its badges.

## Validation

- Red-green verified with a temporary geometry probe story: combobox
wrapper 46px before, 40px after (Input 40px in both). The probe was not
committed (FE10) and no new story ships with this PR per review.
- `pnpm test:storybook` for `MultiSelectCombobox`, `IdpSyncPageView`,
`IdpOrgSyncPageView`, and `DynamicParameter`: all pass.
- `biome check` and `tsc -p .` clean.

> 🤖 This PR was written by Coder Agents on behalf of @tracyjohnsonux.
This commit is contained in:
TJ
2026-08-20 21:55:59 +00:00
committed by GitHub
parent 9168dbf4d3
commit cfc7b825c2
@@ -470,7 +470,7 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
{/* biome-ignore lint/a11y/useKeyWithClickEvents: onKeyDown is not needed here */}
<div
className={cn(
`min-h-10 rounded-md border border-solid border-border text-sm pr-3
`flex min-h-10 flex-col justify-center rounded-md border border-solid border-border text-sm pr-3
focus-within:ring-2 focus-within:ring-content-link [&>svg]:p-0.5`,
{
"pl-3 py-1": selected.length !== 0,
@@ -558,10 +558,10 @@ export const MultiSelectCombobox: React.FC<MultiSelectComboboxProps> = ({
: placeholder
}
className={cn(
"flex-1 border-none outline-none bg-transparent placeholder:text-content-secondary",
"flex-1 border-none outline-none bg-transparent leading-5 placeholder:text-content-secondary",
{
"w-full": hidePlaceholderWhenSelected,
"px-3 py-2.5": selected.length === 0,
"px-3 py-2": selected.length === 0,
"ml-1": selected.length !== 0,
},
inputProps?.className,