feat: improvements to custom styles

apps/web/src/components/ui/combobox.test.tsx

@@ -32,6 +32,14 @@ describe("Combobox", () => {
 		expect(screen.getAllByText("Beta").length).toBeGreaterThan(0);
 	});
 
+	it("places the clear action inside the trigger footprint", () => {
+		const { container } = wrap(<Combobox options={[...options]} value="beta" showClear />);
+
+		expect(screen.getByRole("button", { name: "Clear selection" })).toHaveClass("absolute", "end-7");
+		expect(screen.getByRole("combobox")).not.toHaveClass("pe-14");
+		expect(container.querySelector("[data-slot='combobox-trigger'] > span")).toHaveClass("pe-7");
+	});
+
 	it("renders all option labels for the multi-select default values", () => {
 		wrap(<Combobox multiple options={[...options]} defaultValue={["alpha", "gamma"]} />);
 		expect(screen.getAllByText(/Alpha/).length).toBeGreaterThan(0);

apps/web/src/components/ui/combobox.tsx

@@ -147,6 +147,10 @@ function Combobox<TValue extends string | number = string>(props: ComboboxProps<
 		[contains],
 	);
 
+	const hasSelectedValue = multiple
+		? Array.isArray(selectedValue) && selectedValue.length > 0
+		: selectedValue !== null && selectedValue !== undefined;
+
 	const listContent = (item: ComboboxOption<TValue>) => (
 		<ComboboxItem key={String(item.value)} value={item} disabled={item.disabled}>
 			{item.label}
@@ -166,7 +170,7 @@ function Combobox<TValue extends string | number = string>(props: ComboboxProps<
 				)
 			}
 		>
-			<span className="min-w-0 flex-1 truncate text-left">
+			<span className={cn("min-w-0 flex-1 truncate text-left", showClear && hasSelectedValue && "pe-7")}>
 				<ComboboxValue placeholder={placeholder ?? t`Select...`} />
 			</span>
 		</ComboboxTrigger>
@@ -185,9 +189,15 @@ function Combobox<TValue extends string | number = string>(props: ComboboxProps<
 			{...(multiple ? { multiple: true } : {})}
 		>
 			{showClear ? (
-				<div className="flex items-center gap-1">
+				<div className="relative w-full min-w-0">
 					{triggerNode}
-					<ComboboxClear disabled={disabled} />
+					{hasSelectedValue && (
+						<ComboboxClear
+							aria-label={t`Clear selection`}
+							disabled={disabled}
+							className="absolute end-7 top-1/2 z-10 -translate-y-1/2 text-muted-foreground opacity-70 hover:opacity-100 focus-visible:opacity-100"
+						/>
+					)}
 				</div>
 			) : (
 				triggerNode