Skip to content

Commit 2a4051a

Browse files
committed
fix(webapp): align a select filter field with the options below it
The filter row padded its own left edge, and the bare input inside it also carries left padding from @tailwindcss/forms, so the placeholder sat indented past the options in the list. Dropping the row padding lets the input padding line the text up.
1 parent 6977dc0 commit 2a4051a

1 file changed

Lines changed: 3 additions & 1 deletion

File tree

apps/webapp/app/components/primitives/Select.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -695,7 +695,9 @@ export function ComboBox({
695695
...props
696696
}: ComboBoxProps) {
697697
return (
698-
<div className="flex h-9 w-full flex-none items-center border-b border-grid-dimmed bg-transparent px-3 text-xs text-text-dimmed outline-hidden">
698+
// pl-0: the bare input carries its own left padding from @tailwindcss/forms,
699+
// so padding here too would indent the filter past the options below it.
700+
<div className="flex h-9 w-full flex-none items-center border-b border-grid-dimmed bg-transparent pl-0 pr-3 text-xs text-text-dimmed outline-hidden">
699701
<Ariakit.Combobox
700702
autoSelect={autoSelect}
701703
render={<input placeholder={placeholder} />}

0 commit comments

Comments
 (0)