From cfc7b825c29a002a6f1e9fb888759d099c0238f4 Mon Sep 17 00:00:00 2001
From: TJ <tracy@coder.com>
Date: Thu, 20 Aug 2026 14:55:59 -0700
Subject: [PATCH] fix(site/src/components/MultiSelectCombobox): match Input
 height when empty (#28409)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 .../components/MultiSelectCombobox/MultiSelectCombobox.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
index c69083e7f57..3357870d0eb 100644
--- a/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
+++ b/site/src/components/MultiSelectCombobox/MultiSelectCombobox.tsx
@@ -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,