fix(combobox): stop a single chip wrapping the chevron to a second line
The field's input carried min-w-16 (64px). Flex line-packing sizes a flex item at its min-width, so in a narrow rail field (~202px) one chip (~119px) + the 64px-reserved input + the chevron overflowed the line, wrapping the chevron down while the (grown, empty-looking) input filled the first line — the "breaks to two rows even though it'd fit" glitch seen on the Plex Collection widget and the feed's channel picker (both are Combobox). Lowering the floor to min-w-8 (32px) keeps chip + input + chevron on one line; flex-1 still grows the input to fill the remaining width. Verified in-browser: field height 54px→36px (one row).
This commit is contained in:
@@ -220,7 +220,11 @@ export default function Combobox({
|
||||
? (placeholder ?? t("common.search", { defaultValue: "Search" }))
|
||||
: ""
|
||||
}
|
||||
className="min-w-16 flex-1 bg-transparent px-1 py-0.5 text-sm outline-hidden placeholder:text-muted/60"
|
||||
// min-w-8 (not -16): flex line-packing sizes the input at its MIN-width, so a wide 64px floor
|
||||
// made a single chip + the reserved input + the chevron overflow a narrow rail field — wrapping
|
||||
// the chevron to a second line while the (empty) input filled the first. A small floor keeps the
|
||||
// chip + input + chevron on one line; flex-1 still grows the input to fill whatever room is left.
|
||||
className="min-w-8 flex-1 bg-transparent px-1 py-0.5 text-sm outline-hidden placeholder:text-muted/60"
|
||||
/>
|
||||
<ChevronDown className="pointer-events-none mr-0.5 h-3.5 w-3.5 shrink-0 text-muted" />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user