From 639a30abb5240f538b6da34eeeaede8723df3c63 Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <aaryankhandu123@gmail.com>
Date: Tue, 3 Oct 2023 16:51:03 +0530
Subject: [PATCH] chore: integrate react-popper

---
 .../attribute-display/email.tsx               |  10 +-
 .../attribute-display/number.tsx              |  17 +-
 .../attribute-display/relation.tsx            | 112 ++++----
 .../attribute-display/select.tsx              | 241 +++++++++---------
 .../attribute-display/text.tsx                |  15 +-
 .../attribute-display/url.tsx                 |  10 +-
 .../dropdowns/types-dropdown.tsx              |  93 +++----
 .../issues/peek-overview/layout.tsx           |  28 +-
 web/package.json                              |   2 +
 yarn.lock                                     |   9 +-
 10 files changed, 266 insertions(+), 271 deletions(-)

diff --git a/web/components/custom-attributes/attribute-display/email.tsx b/web/components/custom-attributes/attribute-display/email.tsx
index 9a64708a3..88d87f26e 100644
--- a/web/components/custom-attributes/attribute-display/email.tsx
+++ b/web/components/custom-attributes/attribute-display/email.tsx
@@ -50,10 +50,10 @@ export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChan
   });
 
   return (
-    <div className="flex-shrink-0">
+    <div className="flex-shrink-0 flex">
       {!isEditing && (
         <div
-          className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 w-min max-w-full whitespace-nowrap rounded"
+          className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
           onClick={() => setIsEditing(true)}
         >
           {value && value !== "" ? (
@@ -66,7 +66,11 @@ export const CustomEmailAttribute: React.FC<Props> = ({ attributeDetails, onChan
         </div>
       )}
       {isEditing && (
-        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
+        <form
+          onSubmit={handleSubmit(handleFormSubmit)}
+          className="flex items-center flex-grow"
+          ref={formRef}
+        >
           <Controller
             control={control}
             name="email"
diff --git a/web/components/custom-attributes/attribute-display/number.tsx b/web/components/custom-attributes/attribute-display/number.tsx
index 7b64b8e7a..28ad74aaa 100644
--- a/web/components/custom-attributes/attribute-display/number.tsx
+++ b/web/components/custom-attributes/attribute-display/number.tsx
@@ -59,9 +59,12 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
   const extraSettings = attributeDetails.extra_settings;
 
   return (
-    <div className="flex-shrink-0">
+    <div className="flex-shrink-0 flex">
       {!isEditing && (
-        <div className="cursor-pointer text-xs truncate flex" onClick={() => setIsEditing(true)}>
+        <div
+          className="cursor-pointer text-xs truncate flex w-full"
+          onClick={() => setIsEditing(true)}
+        >
           {value ? (
             <>
               {extraSettings?.representation === "bar" ? (
@@ -91,14 +94,14 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
                   />
                 </div>
               ) : (
-                <span className="font-medium truncate bg-custom-background-80 px-2.5 py-0.5 rounded w-min max-w-full whitespace-nowrap">
+                <span className="font-medium truncate bg-custom-background-80 px-2.5 py-0.5 rounded">
                   {value}
                 </span>
               )}
             </>
           ) : (
             <div
-              className="text-xs truncate bg-custom-background-80 px-2.5 py-0.5 w-min max-w-full whitespace-nowrap"
+              className="text-xs truncate bg-custom-background-80 px-2.5 py-0.5"
               onClick={() => setIsEditing(true)}
             >
               {value ?? "Empty"}
@@ -107,7 +110,11 @@ export const CustomNumberAttribute: React.FC<Props> = ({ attributeDetails, onCha
         </div>
       )}
       {isEditing && (
-        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
+        <form
+          onSubmit={handleSubmit(handleFormSubmit)}
+          className="flex items-center flex-grow"
+          ref={formRef}
+        >
           <Controller
             control={control}
             name="number"
diff --git a/web/components/custom-attributes/attribute-display/relation.tsx b/web/components/custom-attributes/attribute-display/relation.tsx
index a8be14a90..4f6c9c755 100644
--- a/web/components/custom-attributes/attribute-display/relation.tsx
+++ b/web/components/custom-attributes/attribute-display/relation.tsx
@@ -1,17 +1,14 @@
-import React, { useRef, useState } from "react";
-
+import React, { useState } from "react";
 import { useRouter } from "next/router";
-
 import useSWR from "swr";
-
-// headless ui
+import { usePopper } from "react-popper";
 import { Combobox } from "@headlessui/react";
+
 // services
 import cyclesService from "services/cycles.service";
 import modulesService from "services/modules.service";
 // hooks
 import useProjectMembers from "hooks/use-project-members";
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
 // ui
 import { Avatar } from "components/ui";
 // icons
@@ -39,11 +36,14 @@ export const CustomRelationAttribute: React.FC<Props> = ({
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
-  const [isOpen, setIsOpen] = useState(false);
   const [query, setQuery] = useState("");
 
-  const dropdownButtonRef = useRef<HTMLButtonElement>(null);
-  const dropdownOptionsRef = useRef<HTMLUListElement>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
 
   const { data: cycles } = useSWR(
     workspaceSlug && projectId && attributeDetails.unit === "cycle"
@@ -90,8 +90,6 @@ export const CustomRelationAttribute: React.FC<Props> = ({
     option.query.toLowerCase().includes(query.toLowerCase())
   );
 
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownButtonRef, dropdownOptionsRef);
-
   return (
     <Combobox
       as="div"
@@ -99,52 +97,54 @@ export const CustomRelationAttribute: React.FC<Props> = ({
       onChange={(val) => onChange(val)}
       className="flex-shrink-0 text-left flex items-center"
     >
-      {({ open }: { open: boolean }) => (
-        <>
-          <Combobox.Button
-            ref={dropdownButtonRef}
-            className={`flex items-center text-xs rounded px-2.5 py-0.5 truncate w-min max-w-full text-left bg-custom-background-80 ${className}`}
-          >
-            {selectedOption?.label ?? `Select ${attributeDetails.unit}`}
-          </Combobox.Button>
-          <Combobox.Options
-            ref={dropdownOptionsRef}
-            className="fixed z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap mt-1"
-          >
-            <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2 mb-1">
-              <Search className="text-custom-text-400" size={12} strokeWidth={1.5} />
-              <Combobox.Input
-                className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                value={query}
-                onChange={(e) => setQuery(e.target.value)}
-                placeholder="Type to search..."
-                displayValue={(assigned: any) => assigned?.name}
-              />
-            </div>
-            <div className="mt-1 overflow-y-auto">
-              {options ? (
-                options.length > 0 ? (
-                  options.map((option) => (
-                    <Combobox.Option
-                      key={option.id}
-                      value={option.id}
-                      className="flex items-center gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 w-full"
-                    >
-                      {option.label}
-                    </Combobox.Option>
-                  ))
-                ) : (
-                  <p className="text-custom-text-300 text-center py-1">
-                    No {attributeDetails.unit}s found
-                  </p>
-                )
+      <Combobox.Button as={React.Fragment}>
+        <button
+          ref={setReferenceElement}
+          className={`flex items-center text-xs rounded px-2.5 py-0.5 truncate w-min max-w-full text-left bg-custom-background-80 ${className}`}
+        >
+          {selectedOption?.label ?? `Select ${attributeDetails.unit}`}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options>
+        <div
+          className="fixed z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap mt-1"
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded-sm border-[0.6px] border-custom-border-200 bg-custom-background-90 px-2 mb-1">
+            <Search className="text-custom-text-400" size={12} strokeWidth={1.5} />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Type to search..."
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className="mt-1 overflow-y-auto">
+            {options ? (
+              options.length > 0 ? (
+                options.map((option) => (
+                  <Combobox.Option
+                    key={option.id}
+                    value={option.id}
+                    className="flex items-center gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 w-full"
+                  >
+                    {option.label}
+                  </Combobox.Option>
+                ))
               ) : (
-                <p className="text-custom-text-300 text-center py-1">Loading...</p>
-              )}
-            </div>
-          </Combobox.Options>
-        </>
-      )}
+                <p className="text-custom-text-300 text-center py-1">
+                  No {attributeDetails.unit}s found
+                </p>
+              )
+            ) : (
+              <p className="text-custom-text-300 text-center py-1">Loading...</p>
+            )}
+          </div>
+        </div>
+      </Combobox.Options>
     </Combobox>
   );
 };
diff --git a/web/components/custom-attributes/attribute-display/select.tsx b/web/components/custom-attributes/attribute-display/select.tsx
index f066b7f32..218756a93 100644
--- a/web/components/custom-attributes/attribute-display/select.tsx
+++ b/web/components/custom-attributes/attribute-display/select.tsx
@@ -1,9 +1,7 @@
-import React, { useRef, useState } from "react";
-
-// headless ui
+import React, { useState } from "react";
+import { usePopper } from "react-popper";
 import { Combobox } from "@headlessui/react";
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+
 // icons
 import { Check, Search, XIcon } from "lucide-react";
 // types
@@ -24,11 +22,14 @@ type Props = {
 export const CustomSelectAttribute: React.FC<Props> = (props) => {
   const { attributeDetails, className = "", multiple = false, onChange, value } = props;
 
-  const [isOpen, setIsOpen] = useState(false);
   const [query, setQuery] = useState("");
 
-  const dropdownButtonRef = useRef<HTMLButtonElement>(null);
-  const dropdownOptionsRef = useRef<HTMLUListElement>(null);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "bottom-start",
+  });
 
   const options = attributeDetails.children.filter((option) =>
     option.display_name.toLowerCase().includes(query.toLowerCase())
@@ -39,137 +40,127 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
     value,
   };
 
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownButtonRef, dropdownOptionsRef);
-
   if (multiple) comboboxProps.multiple = true;
 
   return (
     <Combobox as="div" className="flex-shrink-0 text-left flex items-center" {...comboboxProps}>
-      {({ open }: { open: boolean }) => {
-        if (open) {
-          if (!isOpen) setIsOpen(true);
-        } else if (isOpen) setIsOpen(false);
+      <Combobox.Button as={React.Fragment}>
+        <button type="button" ref={setReferenceElement}>
+          {value ? (
+            Array.isArray(value) ? (
+              value.length > 0 ? (
+                <div className="flex items-center gap-1 flex-wrap">
+                  {value.map((val) => {
+                    const optionDetails = options.find((o) => o.id === val);
 
-        return (
-          <>
-            <Combobox.Button ref={dropdownButtonRef}>
-              {value ? (
-                Array.isArray(value) ? (
-                  value.length > 0 ? (
-                    <div className="flex items-center gap-1 flex-wrap">
-                      {value.map((val) => {
-                        const optionDetails = options.find((o) => o.id === val);
-
-                        return (
-                          <div
-                            key={val}
-                            className="px-2.5 py-0.5 rounded text-xs flex items-center justify-between gap-1"
-                            style={{
-                              backgroundColor: `${optionDetails?.color}40`,
-                            }}
-                          >
-                            {optionDetails?.display_name}
-                            {((attributeDetails.is_required && value.length > 1) ||
-                              !attributeDetails.is_required) && (
-                              <span
-                                onClick={(e) => {
-                                  e.preventDefault();
-                                  e.stopPropagation();
-
-                                  onChange(value.filter((v) => v !== val));
-                                }}
-                              >
-                                <XIcon size={10} strokeWidth={1.5} />
-                              </span>
-                            )}
-                          </div>
-                        );
-                      })}
-                    </div>
-                  ) : (
-                    <div
-                      className={`text-xs px-2.5 py-0.5 rounded bg-custom-background-80 ${className}`}
-                    >
-                      Select {attributeDetails.display_name}
-                    </div>
-                  )
-                ) : (
-                  <div
-                    className="px-2.5 py-0.5 rounded text-xs flex items-center justify-between gap-1"
-                    style={{
-                      backgroundColor: `${options.find((o) => o.id === value)?.color}40`,
-                    }}
-                  >
-                    {options.find((o) => o.id === value)?.display_name}
-                    {!attributeDetails.is_required && (
-                      <span
-                        onClick={(e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-
-                          onChange(undefined);
+                    return (
+                      <div
+                        key={val}
+                        className="px-2.5 py-0.5 rounded text-xs flex items-center justify-between gap-1"
+                        style={{
+                          backgroundColor: `${optionDetails?.color}40`,
                         }}
                       >
-                        <XIcon size={10} strokeWidth={1.5} />
-                      </span>
-                    )}
-                  </div>
-                )
+                        {optionDetails?.display_name}
+                        {((attributeDetails.is_required && value.length > 1) ||
+                          !attributeDetails.is_required) && (
+                          <span
+                            onClick={(e) => {
+                              e.preventDefault();
+                              e.stopPropagation();
+
+                              onChange(value.filter((v) => v !== val));
+                            }}
+                          >
+                            <XIcon size={10} strokeWidth={1.5} />
+                          </span>
+                        )}
+                      </div>
+                    );
+                  })}
+                </div>
               ) : (
                 <div
-                  className={`cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded ${className}`}
+                  className={`text-xs px-2.5 py-0.5 rounded bg-custom-background-80 ${className}`}
                 >
                   Select {attributeDetails.display_name}
                 </div>
-              )}
-            </Combobox.Button>
-            <div
-              className={`${open ? "fixed z-20 top-0 left-0 h-screen w-screen cursor-auto" : ""}`}
-            >
-              <Combobox.Options
-                ref={dropdownOptionsRef}
-                className="fixed z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap mt-1"
+              )
+            ) : (
+              <div
+                className="px-2.5 py-0.5 rounded text-xs flex items-center justify-between gap-1"
+                style={{
+                  backgroundColor: `${options.find((o) => o.id === value)?.color}40`,
+                }}
               >
-                <div className="flex w-full items-center justify-start rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 mb-1">
-                  <Search className="text-custom-text-400" size={12} strokeWidth={1.5} />
-                  <Combobox.Input
-                    className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
-                    value={query}
-                    onChange={(e) => setQuery(e.target.value)}
-                    placeholder="Type to search..."
-                    displayValue={(assigned: any) => assigned?.name}
-                  />
-                </div>
-                <div className="mt-1 overflow-y-auto">
-                  {(options ?? []).map((option) => (
-                    <Combobox.Option
-                      key={option.id}
-                      value={option.id}
-                      className={({ active }) =>
-                        `flex items-center justify-between gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 w-full ${
-                          active ? "bg-custom-background-80" : ""
-                        }`
-                      }
-                    >
-                      {({ selected }) => (
-                        <>
-                          <span
-                            className="px-1 rounded-sm truncate"
-                            style={{ backgroundColor: `${option.color}40` }}
-                          >
-                            {option.display_name}
-                          </span>
-                          {selected && <Check size={14} strokeWidth={1.5} />}
-                        </>
-                      )}
-                    </Combobox.Option>
-                  ))}
-                </div>
-              </Combobox.Options>
+                {options.find((o) => o.id === value)?.display_name}
+                {!attributeDetails.is_required && (
+                  <span
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+
+                      onChange(undefined);
+                    }}
+                  >
+                    <XIcon size={10} strokeWidth={1.5} />
+                  </span>
+                )}
+              </div>
+            )
+          ) : (
+            <div
+              className={`cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded ${className}`}
+            >
+              Select {attributeDetails.display_name}
             </div>
-          </>
-        );
-      }}
+          )}
+        </button>
+      </Combobox.Button>
+      <Combobox.Options>
+        <div
+          className="fixed z-10 border border-custom-border-300 px-2 py-2.5 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none w-48 whitespace-nowrap mt-1"
+          ref={setPopperElement}
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          <div className="flex w-full items-center justify-start rounded-sm border-[0.5px] border-custom-border-200 bg-custom-background-90 px-2 mb-1">
+            <Search className="text-custom-text-400" size={12} strokeWidth={1.5} />
+            <Combobox.Input
+              className="w-full bg-transparent py-1 px-2 text-xs text-custom-text-200 placeholder:text-custom-text-400 focus:outline-none"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Type to search..."
+              displayValue={(assigned: any) => assigned?.name}
+            />
+          </div>
+          <div className="mt-1 overflow-y-auto">
+            {(options ?? []).map((option) => (
+              <Combobox.Option
+                key={option.id}
+                value={option.id}
+                className={({ active }) =>
+                  `flex items-center justify-between gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 w-full ${
+                    active ? "bg-custom-background-80" : ""
+                  }`
+                }
+              >
+                {({ selected }) => (
+                  <>
+                    <span
+                      className="px-1 rounded-sm truncate"
+                      style={{ backgroundColor: `${option.color}40` }}
+                    >
+                      {option.display_name}
+                    </span>
+                    {selected && <Check size={14} strokeWidth={1.5} />}
+                  </>
+                )}
+              </Combobox.Option>
+            ))}
+          </div>
+        </div>
+      </Combobox.Options>
     </Combobox>
   );
 };
diff --git a/web/components/custom-attributes/attribute-display/text.tsx b/web/components/custom-attributes/attribute-display/text.tsx
index f80144b7b..ec8c9545a 100644
--- a/web/components/custom-attributes/attribute-display/text.tsx
+++ b/web/components/custom-attributes/attribute-display/text.tsx
@@ -56,17 +56,22 @@ export const CustomTextAttribute: React.FC<Props & { value: string | undefined }
   });
 
   return (
-    <div className="flex-shrink-0">
+    <div className="flex-shrink-0 flex">
       {!isEditing && (
-        <div
-          className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 w-min max-w-full whitespace-nowrap rounded"
+        <button
+          type="button"
           onClick={() => setIsEditing(true)}
+          className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
         >
           {value && value !== "" ? value : "Empty"}
-        </div>
+        </button>
       )}
       {isEditing && (
-        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
+        <form
+          onSubmit={handleSubmit(handleFormSubmit)}
+          className="flex items-center flex-grow"
+          ref={formRef}
+        >
           <Controller
             control={control}
             name="text"
diff --git a/web/components/custom-attributes/attribute-display/url.tsx b/web/components/custom-attributes/attribute-display/url.tsx
index 19a7cfc3c..0438485b4 100644
--- a/web/components/custom-attributes/attribute-display/url.tsx
+++ b/web/components/custom-attributes/attribute-display/url.tsx
@@ -54,10 +54,10 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
   });
 
   return (
-    <div className="flex-shrink-0">
+    <div className="flex-shrink-0 flex">
       {!isEditing && (
         <div
-          className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 w-min max-w-full whitespace-nowrap rounded"
+          className="cursor-pointer text-xs truncate bg-custom-background-80 px-2.5 py-0.5 rounded"
           onClick={() => setIsEditing(true)}
         >
           {value && value !== "" ? (
@@ -70,7 +70,11 @@ export const CustomUrlAttribute: React.FC<Props & { value: string | undefined }>
         </div>
       )}
       {isEditing && (
-        <form onSubmit={handleSubmit(handleFormSubmit)} className="flex items-center" ref={formRef}>
+        <form
+          onSubmit={handleSubmit(handleFormSubmit)}
+          className="flex items-center flex-grow"
+          ref={formRef}
+        >
           <Controller
             control={control}
             name="url"
diff --git a/web/components/custom-attributes/dropdowns/types-dropdown.tsx b/web/components/custom-attributes/dropdowns/types-dropdown.tsx
index 01aa88c8d..91da04f9c 100644
--- a/web/components/custom-attributes/dropdowns/types-dropdown.tsx
+++ b/web/components/custom-attributes/dropdowns/types-dropdown.tsx
@@ -1,9 +1,7 @@
-import React, { useRef, useState } from "react";
-
-// headless ui
+import React, { useState } from "react";
 import { Menu } from "@headlessui/react";
-// hooks
-import useDynamicDropdownPosition from "hooks/use-dynamic-dropdown";
+import { usePopper } from "react-popper";
+
 // icons
 import { Plus } from "lucide-react";
 // types
@@ -16,59 +14,50 @@ type Props = {
 };
 
 export const TypesDropdown: React.FC<Props> = ({ onClick }) => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [referenceElement, setReferenceElement] = useState<HTMLButtonElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
 
-  const buttonRef = useRef<HTMLButtonElement>(null);
-  const optionsRef = useRef<HTMLDivElement>(null);
-
-  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), buttonRef, optionsRef);
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: "top",
+  });
 
   return (
     <Menu as="div" className="flex-shrink-0 text-left">
-      {({ open }: { open: boolean }) => {
-        if (open) {
-          if (!isOpen) setIsOpen(true);
-        } else if (isOpen) setIsOpen(false);
+      <Menu.Button as={React.Fragment}>
+        <button
+          type="button"
+          ref={setReferenceElement}
+          className="flex items-center gap-1 text-xs font-medium text-custom-primary-100"
+        >
+          <Plus size={14} strokeWidth={1.5} />
+          Add Attribute
+        </button>
+      </Menu.Button>
+      <Menu.Items>
+        <div
+          ref={setPopperElement}
+          className="fixed z-10 border-[0.5px] border-custom-border-300 p-1 min-w-[10rem] max-h-60 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none overflow-y-auto"
+          style={styles.popper}
+          {...attributes.popper}
+        >
+          {Object.keys(CUSTOM_ATTRIBUTES_LIST).map((type) => {
+            const typeMetaData = CUSTOM_ATTRIBUTES_LIST[type as TCustomAttributeTypes];
 
-        return (
-          <>
-            <Menu.Button
-              ref={buttonRef}
-              className="flex items-center gap-1 text-xs font-medium text-custom-primary-100"
-            >
-              <Plus size={14} strokeWidth={1.5} />
-              Add Attribute
-            </Menu.Button>
-            <div
-              className={`${
-                open ? "" : "hidden"
-              } fixed z-20 top-0 left-0 h-full w-full cursor-auto`}
-            >
-              <Menu.Items
-                ref={optionsRef}
-                className="fixed z-10 border-[0.5px] border-custom-border-300 p-1 min-w-[10rem] max-h-60 rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none overflow-y-auto"
+            return (
+              <Menu.Item
+                key={type}
+                as="button"
+                type="button"
+                onClick={() => onClick(type as TCustomAttributeTypes)}
+                className="flex items-center gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 w-full"
               >
-                {Object.keys(CUSTOM_ATTRIBUTES_LIST).map((type) => {
-                  const typeMetaData = CUSTOM_ATTRIBUTES_LIST[type as TCustomAttributeTypes];
-
-                  return (
-                    <Menu.Item
-                      key={type}
-                      as="button"
-                      type="button"
-                      onClick={() => onClick(type as TCustomAttributeTypes)}
-                      className="flex items-center gap-1 cursor-pointer select-none truncate rounded px-1 py-1.5 hover:bg-custom-background-80 w-full"
-                    >
-                      <typeMetaData.icon size={14} strokeWidth={1.5} />
-                      {typeMetaData.label}
-                    </Menu.Item>
-                  );
-                })}
-              </Menu.Items>
-            </div>
-          </>
-        );
-      }}
+                <typeMetaData.icon size={14} strokeWidth={1.5} />
+                {typeMetaData.label}
+              </Menu.Item>
+            );
+          })}
+        </div>
+      </Menu.Items>
     </Menu>
   );
 };
diff --git a/web/components/issues/peek-overview/layout.tsx b/web/components/issues/peek-overview/layout.tsx
index bd40fb0a8..57bcb904c 100644
--- a/web/components/issues/peek-overview/layout.tsx
+++ b/web/components/issues/peek-overview/layout.tsx
@@ -102,17 +102,17 @@ export const IssuePeekOverview: React.FC<Props> = observer(
         />
         <Transition.Root appear show={isSidePeekOpen} as={React.Fragment}>
           <Dialog as="div" className="relative z-20" onClose={handleClose}>
-            <Transition.Child
-              as={React.Fragment}
-              enter="transition-transform duration-300"
-              enterFrom="translate-x-full"
-              enterTo="translate-x-0"
-              leave="transition-transform duration-200"
-              leaveFrom="translate-x-0"
-              leaveTo="translate-x-full"
-            >
-              <Dialog.Panel className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
-                <div className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
+            <div className="fixed inset-0 z-20 h-full w-full overflow-y-auto">
+              <Transition.Child
+                as={React.Fragment}
+                enter="transition-transform duration-300"
+                enterFrom="translate-x-full"
+                enterTo="translate-x-0"
+                leave="transition-transform duration-200"
+                leaveFrom="translate-x-0"
+                leaveTo="translate-x-full"
+              >
+                <Dialog.Panel className="fixed z-20 bg-custom-background-100 top-0 right-0 h-full w-1/2 shadow-custom-shadow-md">
                   <SidePeekView
                     handleClose={handleClose}
                     handleDeleteIssue={() => setDeleteIssueModal(true)}
@@ -123,9 +123,9 @@ export const IssuePeekOverview: React.FC<Props> = observer(
                     setMode={(mode) => setPeekOverviewMode(mode)}
                     workspaceSlug={workspaceSlug}
                   />
-                </div>
-              </Dialog.Panel>
-            </Transition.Child>
+                </Dialog.Panel>
+              </Transition.Child>
+            </div>
           </Dialog>
         </Transition.Root>
         <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>
diff --git a/web/package.json b/web/package.json
index 93fc9366e..942116ce5 100644
--- a/web/package.json
+++ b/web/package.json
@@ -25,6 +25,7 @@
     "@nivo/line": "0.80.0",
     "@nivo/pie": "0.80.0",
     "@nivo/scatterplot": "0.80.0",
+    "@popperjs/core": "^2.11.8",
     "@sentry/nextjs": "^7.36.0",
     "@tiptap/extension-code-block-lowlight": "^2.0.4",
     "@tiptap/extension-color": "^2.0.4",
@@ -72,6 +73,7 @@
     "react-hook-form": "^7.38.0",
     "react-markdown": "^8.0.7",
     "react-moveable": "^0.54.1",
+    "react-popper": "^2.3.0",
     "sharp": "^0.32.1",
     "sonner": "^0.6.2",
     "swr": "^2.1.3",
diff --git a/yarn.lock b/yarn.lock
index 9d18f4cee..4b7d3f07c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6628,20 +6628,13 @@ prosemirror-menu@^1.2.1:
     prosemirror-history "^1.0.0"
     prosemirror-state "^1.0.0"
 
-prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.8.1:
+prosemirror-model@1.18.1, prosemirror-model@^1.0.0, prosemirror-model@^1.16.0, prosemirror-model@^1.18.1, prosemirror-model@^1.19.0, prosemirror-model@^1.8.1:
   version "1.18.1"
   resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.18.1.tgz#1d5d6b6de7b983ee67a479dc607165fdef3935bd"
   integrity sha512-IxSVBKAEMjD7s3n8cgtwMlxAXZrC7Mlag7zYsAKDndAqnDScvSmp/UdnRTV/B33lTCVU3CCm7dyAn/rVVD0mcw==
   dependencies:
     orderedmap "^2.0.0"
 
-prosemirror-model@^1.19.0:
-  version "1.19.3"
-  resolved "https://registry.yarnpkg.com/prosemirror-model/-/prosemirror-model-1.19.3.tgz#f0d55285487fefd962d0ac695f716f4ec6705006"
-  integrity sha512-tgSnwN7BS7/UM0sSARcW+IQryx2vODKX4MI7xpqY2X+iaepJdKBPc7I4aACIsDV/LTaTjt12Z56MhDr9LsyuZQ==
-  dependencies:
-    orderedmap "^2.0.0"
-
 prosemirror-schema-basic@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/prosemirror-schema-basic/-/prosemirror-schema-basic-1.2.2.tgz#6695f5175e4628aab179bf62e5568628b9cfe6c7"