From f8e144a6588cbef30b402130328eb317caa54d86 Mon Sep 17 00:00:00 2001 From: npeter83 Date: Sat, 22 Aug 2026 07:56:05 +0200 Subject: [PATCH] fix(combobox): stop a single chip wrapping the chevron to a second line MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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). --- frontend/src/components/Combobox.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Combobox.tsx b/frontend/src/components/Combobox.tsx index 4325b3ac..9cf34c78 100644 --- a/frontend/src/components/Combobox.tsx +++ b/frontend/src/components/Combobox.tsx @@ -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" />