Merge pull request #117 from bleu/luiza/prkmain-201-display-full-tag-text-in-participant-tag-picker

TaggablePopover show all tags and fix color picker preview

Author: luizakp

src/components/FormBuilder/fields/selects/ColorPickerField.tsx

@@ -89,7 +89,9 @@ export const ColorPickerField = withConditional<ColorPickerFieldProps>(
                   colorPickerVariants(field.style)
                 )}
               >
-                {formField.value && <span className="ml-3">#</span>}
+                <span className={cn("ml-3", !formField.value && "invisible")}>
+                  #
+                </span>
                 <input
                   type="text"
                   className="p-2 mx-0 flex-1 border-0 border-transparent bg-transparent file:border-0 file:bg-transparent file:text-sm file:font-medium focus:border-transparent focus:ring-0"
@@ -103,7 +105,7 @@ export const ColorPickerField = withConditional<ColorPickerFieldProps>(
                 <Popover>
                   <PopoverTrigger asChild>
                     <div
-                      className="mr-2 size-7 rounded-full border shadow-lg"
+                      className="mr-2 h-7 w-7 shrink-0 rounded-full border shadow-lg"
                       style={{ background: formField.value ?? "#aabbcc" }}
                     />
                   </PopoverTrigger>

src/components/TaggablePopover.tsx

@@ -121,40 +121,25 @@ export const TaggablePopover = ({
           <Button
             variant="outline"
             size="sm"
-            className="my-4 h-8 border-dashed dark:border-2"
+            className="my-4 h-auto min-h-8 border-dashed dark:border-2"
           >
-            <PlusCircledIcon className="mr-2 h-4 w-4" />
+            <PlusCircledIcon className="mr-2 h-4 w-4 shrink-0" />
             Tags
             {selectedTags?.length > 0 && (
               <>
                 <Separator orientation="vertical" className="mx-2 h-4" />
-                <Badge
-                  color="secondary"
-                  className="rounded-sm px-1 font-normal lg:hidden"
-                >
-                  {selectedTags.length}
-                </Badge>
-                <div className="hidden space-x-1 lg:flex">
-                  {selectedTags.length > 2 ? (
-                    <Badge
-                      color="secondary"
-                      className="rounded-sm px-1 font-normal"
-                    >
-                      {selectedTags.length} tags
-                    </Badge>
-                  ) : (
-                    tags
-                      .filter((option) => selectedTags.includes(option.value))
-                      .map((option) => (
-                        <Badge
-                          color="secondary"
-                          key={option.value}
-                          className="rounded-sm px-1 font-normal"
-                        >
-                          {option.label}
-                        </Badge>
-                      ))
-                  )}
+                <div className="flex max-w-xs flex-wrap gap-1 py-4">
+                  {tags
+                    .filter((option) => selectedTags.includes(option.value))
+                    .map((option) => (
+                      <Badge
+                        color="secondary"
+                        key={option.value}
+                        className="rounded-sm px-1 font-normal"
+                      >
+                        {option.label}
+                      </Badge>
+                    ))}
                 </div>
               </>
             )}