Merge pull request #2109 from adevinta/fix-combobox-input-overflow

fix(combobox): combobox content overflow on smaller screens
adevinta · May 3, 2024 · 78b1ddd · 78b1ddd
2 parents 5d945ed + 9e1d55b
commit 78b1ddd
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/combobox/src/ComboboxInput.tsx b/packages/components/combobox/src/ComboboxInput.tsx
@@ -79,7 +79,8 @@ export const Input = forwardRef(
             type="text"
             placeholder={placeholder}
             className={cx(
-              'h-sz-28 shrink-0 flex-grow basis-[80px] text-ellipsis bg-surface px-sm text-body-1 outline-none',
+              'max-w-full shrink-0 grow basis-[80px]',
+              'h-sz-28 text-ellipsis bg-surface px-sm text-body-1 outline-none',
               'disabled:cursor-not-allowed disabled:bg-transparent disabled:text-on-surface/dim-3',
               'read-only:cursor-default read-only:bg-transparent read-only:text-on-surface',
               className

diff --git a/packages/components/combobox/src/ComboboxTrigger.tsx b/packages/components/combobox/src/ComboboxTrigger.tsx
@@ -92,14 +92,16 @@ export const Trigger = forwardRef(
             <div
               ref={scrollableAreaRef}
               className={cx(
-                'inline-flex grow items-start gap-sm py-md',
+                'inline-flex min-w-none grow items-start gap-sm py-md',
                 ctx.wrap ? 'flex-wrap' : 'overflow-x-auto p-[2px] u-no-scrollbar'
               )}
             >
               {selectedItems}
               {input}
             </div>
+
             {hasClearButton && clearButton}
+
             {disclosure}
           </div>
         </PopoverAnchor>