diff --git a/web/components/custom-attributes/attribute-display/relation.tsx b/web/components/custom-attributes/attribute-display/relation.tsx
index fd8e73306..e1940493f 100644
--- a/web/components/custom-attributes/attribute-display/relation.tsx
+++ b/web/components/custom-attributes/attribute-display/relation.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 
 import { useRouter } from "next/router";
 
@@ -9,14 +9,17 @@ import { Combobox, Transition } 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
 import { Search } from "lucide-react";
 // types
 import { ICustomAttribute } from "types";
 // fetch-keys
 import { CYCLES_LIST, MODULE_LIST } from "constants/fetch-keys";
-import useProjectMembers from "hooks/use-project-members";
-import { Avatar } from "components/ui";
 
 type Props = {
   attributeDetails: ICustomAttribute;
@@ -37,8 +40,12 @@ 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 { data: cycles } = useSWR(
     workspaceSlug && projectId && attributeDetails.unit === "cycle"
       ? CYCLES_LIST(projectId.toString())
@@ -84,64 +91,59 @@ export const CustomRelationAttribute: React.FC<Props> = ({
     option.query.toLowerCase().includes(query.toLowerCase())
   );
 
+  useDynamicDropdownPosition(isOpen, () => setIsOpen(false), dropdownButtonRef, dropdownOptionsRef);
+
   return (
     <Combobox
       as="div"
       value={value}
       onChange={(val) => onChange(val)}
-      className="relative flex-shrink-0 text-left"
+      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>
-          <Transition
-            show={open}
-            as={React.Fragment}
-            enter="transition ease-out duration-200"
-            enterFrom="opacity-0 translate-y-1"
-            enterTo="opacity-100 translate-y-0"
-            leave="transition ease-in duration-150"
-            leaveFrom="opacity-100 translate-y-0"
-            leaveTo="opacity-0 translate-y-1"
+          <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"
           >
-            <Combobox.Options className="fixed z-10 mb-2 border-[0.5px] border-custom-border-300 p-1 min-w-[10rem] max-h-60 max-w-[10rem] rounded bg-custom-background-100 text-xs shadow-custom-shadow-rg focus:outline-none mt-1 flex flex-col overflow-hidden">
-              <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>
-                  )
+            <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>
-          </Transition>
+                  <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>
+          </Combobox.Options>
         </>
       )}
     </Combobox>
diff --git a/web/components/custom-attributes/attribute-display/select.tsx b/web/components/custom-attributes/attribute-display/select.tsx
index 49a720726..42e11588d 100644
--- a/web/components/custom-attributes/attribute-display/select.tsx
+++ b/web/components/custom-attributes/attribute-display/select.tsx
@@ -125,7 +125,9 @@ export const CustomSelectAttribute: React.FC<Props> = (props) => {
                 </div>
               )}
             </Combobox.Button>
-            <div className={`${open ? "fixed z-20 top-0 left-0 h-full w-full cursor-auto" : ""}`}>
+            <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"
diff --git a/web/components/custom-attributes/object-modal.tsx b/web/components/custom-attributes/object-modal.tsx
index 0e9eecd70..0c3f9879c 100644
--- a/web/components/custom-attributes/object-modal.tsx
+++ b/web/components/custom-attributes/object-modal.tsx
@@ -145,18 +145,18 @@ export const ObjectModal: React.FC<Props> = observer(
             <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
           </Transition.Child>
 
-          <div className="fixed inset-0 h-full w-full z-20">
-            <div className="flex items-center justify-center h-full w-full p-4 sm:p-0">
-              <Transition.Child
-                as={React.Fragment}
-                enter="ease-out duration-300"
-                enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                enterTo="opacity-100 translate-y-0 sm:scale-100"
-                leave="ease-in duration-200"
-                leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              >
-                <Dialog.Panel className="bg-custom-background-100 w-1/2 max-h-[85%] flex flex-col rounded-xl">
+          <Transition.Child
+            as={React.Fragment}
+            enter="ease-out duration-300"
+            enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            enterTo="opacity-100 translate-y-0 sm:scale-100"
+            leave="ease-in duration-200"
+            leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+            leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+          >
+            <Dialog.Panel className="fixed inset-0 h-full w-full z-20">
+              <div className="flex items-center justify-center h-full w-full p-4 sm:p-0">
+                <div className="bg-custom-background-100 w-1/2 max-h-[85%] flex flex-col rounded-xl">
                   <h3 className="text-2xl font-semibold px-6 pt-5">New Object</h3>
                   <div className="mt-5 space-y-5 h-full overflow-y-auto">
                     <div className="space-y-4 px-6">
@@ -253,10 +253,10 @@ export const ObjectModal: React.FC<Props> = observer(
                       )}
                     </div>
                   </div>
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
-          </div>
+                </div>
+              </div>
+            </Dialog.Panel>
+          </Transition.Child>
         </Dialog>
       </Transition.Root>
     );
diff --git a/web/components/issues/modal.tsx b/web/components/issues/modal.tsx
index cd6401fef..334c914a5 100644
--- a/web/components/issues/modal.tsx
+++ b/web/components/issues/modal.tsx
@@ -538,18 +538,18 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(
               <div className="fixed inset-0 bg-custom-backdrop bg-opacity-50 transition-opacity" />
             </Transition.Child>
 
-            <div className="fixed inset-0 z-20 overflow-y-auto">
-              <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
-                <Transition.Child
-                  as={React.Fragment}
-                  enter="ease-out duration-300"
-                  enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                  enterTo="opacity-100 translate-y-0 sm:scale-100"
-                  leave="ease-in duration-200"
-                  leaveFrom="opacity-100 translate-y-0 sm:scale-100"
-                  leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-                >
-                  <Dialog.Panel className="relative transform rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
+            <Transition.Child
+              as={React.Fragment}
+              enter="ease-out duration-300"
+              enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+              enterTo="opacity-100 translate-y-0 sm:scale-100"
+              leave="ease-in duration-200"
+              leaveFrom="opacity-100 translate-y-0 sm:scale-100"
+              leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+            >
+              <Dialog.Panel className="fixed inset-0 h-full w-full z-20 overflow-y-auto">
+                <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
+                  <div className="relative rounded-lg border border-custom-border-200 bg-custom-background-100 text-left shadow-xl transition-all sm:w-full sm:max-w-2xl">
                     <IssueForm
                       handleFormSubmit={handleFormSubmit}
                       initialData={data ?? prePopulateData}
@@ -565,10 +565,10 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(
                       handleCustomAttributesChange={handleCustomAttributesChange}
                       handleFormDirty={handleFormDirty}
                     />
-                  </Dialog.Panel>
-                </Transition.Child>
-              </div>
-            </div>
+                  </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
           </Dialog>
         </Transition.Root>
       </>
diff --git a/web/components/issues/peek-overview/layout.tsx b/web/components/issues/peek-overview/layout.tsx
index 57bcb904c..bd40fb0a8 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}>
-            <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">
+            <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">
                   <SidePeekView
                     handleClose={handleClose}
                     handleDeleteIssue={() => setDeleteIssueModal(true)}
@@ -123,9 +123,9 @@ export const IssuePeekOverview: React.FC<Props> = observer(
                     setMode={(mode) => setPeekOverviewMode(mode)}
                     workspaceSlug={workspaceSlug}
                   />
-                </Dialog.Panel>
-              </Transition.Child>
-            </div>
+                </div>
+              </Dialog.Panel>
+            </Transition.Child>
           </Dialog>
         </Transition.Root>
         <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>