mirror of
https://github.com/coder/coder.git
synced 2026-10-31 02:43:21 +08:00
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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user