fix: apply fit-content width to input in inline tag feature

JaleelB · May 27, 2024 · 0c5691f · 0c5691f
1 parent 54fe016
commit 0c5691f
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 2 deletions.
diff --git a/.changeset/great-plants-explode.md b/.changeset/great-plants-explode.md
@@ -0,0 +1,9 @@
+---
+'emblor': patch
+---
+
+🐞 Bug Fixes
+
+- Applied a width of `fit-content` to the input component when `includeTagsInInput` is enabled.
+- Addressed an issue where the input was taking the full width of the container, causing tags to stack on top of the input.
+- Ensured that the input and tags are displayed inline, improving the user experience and layout consistency.
diff --git a/packages/emblor/src/tag/tag-input.tsx b/packages/emblor/src/tag/tag-input.tsx
@@ -264,7 +264,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref)
                 {...inputProps}
                 className={cn(
                   className,
-                  'border-0 h-5 bg-transparent sm:min-w-focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 min-w-[130px]',
+                  'border-0 h-5 bg-transparent sm:min-w-focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 w-fit',
                 )}
                 autoComplete={enableAutocomplete ? 'on' : 'off'}
                 list={enableAutocomplete ? 'autocomplete-options' : undefined}
@@ -329,7 +329,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>((props, ref)
                     onFocus={onFocus}
                     onBlur={onBlur}
                     includeTagsInInput={includeTagsInInput}
-                    className="border-0 min-w-[130px] h-5"
+                    className="border-0 w-fit h-5"
                   />
                 </div>
               )