[WEB-800] fix: issue peekview, and detail page create label colour selector autoplacement (#4032)

* fix: issue peekview, and detail label colour selector autoplacement

* fix: build errors

web/components/issues/issue-detail/label/create-label.tsx

@@ -1,14 +1,13 @@
 import { FC, useState, Fragment, useEffect } from "react";
 import { TwitterPicker } from "react-color";
 import { Controller, useForm } from "react-hook-form";
+import { usePopper } from "react-popper";
 import { Plus, X, Loader } from "lucide-react";
-import { Popover, Transition } from "@headlessui/react";
+import { Popover } from "@headlessui/react";
 import { IIssueLabel } from "@plane/types";
 // hooks
 import { Input, TOAST_TYPE, setToast } from "@plane/ui";
 import { useIssueDetail } from "@/hooks/store";
-// helpers
-import { cn } from "helpers/common.helper";
 // ui
 // types
 import { TLabelOperations } from "./root";
@@ -31,11 +30,12 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
   // hooks
   const {
     issue: { getIssueById },
-    peekIssue,
   } = useIssueDetail();
   // state
   const [isCreateToggle, setIsCreateToggle] = useState(false);
   const handleIsCreateToggle = () => setIsCreateToggle(!isCreateToggle);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
   // react hook form
   const {
     handleSubmit,
@@ -47,6 +47,18 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
     defaultValues,
   });
 
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+    modifiers: [
+      {
+        name: "preventOverflow",
+        options: {
+          padding: 12,
+        },
+      },
+    ],
+  });
+
   useEffect(() => {
     if (!isCreateToggle) return;
 
@@ -93,36 +105,28 @@ export const LabelCreate: FC<ILabelCreate> = (props) => {
               render={({ field: { value, onChange } }) => (
                 <Popover>
                   <>
-                    <Popover.Button className="grid place-items-center outline-none">
+                    <Popover.Button as={Fragment}>
-                      {value && value?.trim() !== "" && (
+                      <button type="button" ref={setReferenceElement} className="grid place-items-center outline-none">
-                        <span
+                        {value && value?.trim() !== "" && (
-                          className="h-6 w-6 rounded"
+                          <span
-                          style={{
+                            className="h-6 w-6 rounded"
-                            backgroundColor: value ?? "black",
+                            style={{
-                          }}
+                              backgroundColor: value ?? "black",
-                        />
+                            }}
-                      )}
+                          />
+                        )}
+                      </button>
                     </Popover.Button>
-
+                    <Popover.Panel className="fixed z-10">
-                    <Transition
+                      <div
-                      as={Fragment}
+                        className="p-2 max-w-xs sm:px-0"
-                      enter="transition ease-out duration-200"
+                        ref={setPopperElement}
-                      enterFrom="opacity-0 translate-y-1"
+                        style={styles.popper}
-                      enterTo="opacity-100 translate-y-0"
+                        {...attributes.popper}
-                      leave="transition ease-in duration-150"
-                      leaveFrom="opacity-100 translate-y-0"
-                      leaveTo="opacity-0 translate-y-1"
-                    >
-                      <Popover.Panel
-                        className={cn("absolute z-10 mt-1.5 max-w-xs px-2 sm:px-0", !peekIssue ? "right-0" : "")}
                       >
-                        <TwitterPicker
+                        <TwitterPicker triangle={"hide"} color={value} onChange={(value) => onChange(value.hex)} />
-                          triangle={!peekIssue ? "hide" : "top-left"}
+                      </div>
-                          color={value}
+                    </Popover.Panel>
-                          onChange={(value) => onChange(value.hex)}
-                        />
-                      </Popover.Panel>
-                    </Transition>
                   </>
                 </Popover>
               )}