fix: modals layout

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,31 +91,27 @@ 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
+          <Combobox.Options
-            show={open}
+            ref={dropdownOptionsRef}
-            as={React.Fragment}
+            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"
-            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 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
@@ -141,7 +144,6 @@ export const CustomRelationAttribute: React.FC<Props> = ({
               )}
             </div>
           </Combobox.Options>
-          </Transition>
         </>
       )}
     </Combobox>

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"

web/components/custom-attributes/object-modal.tsx

@@ -145,8 +145,6 @@ 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"
@@ -156,7 +154,9 @@ export const ObjectModal: React.FC<Props> = observer(
             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">
+            <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>
+                </div>
+              </div>
             </Dialog.Panel>
           </Transition.Child>
-            </div>
-          </div>
         </Dialog>
       </Transition.Root>
     );

web/components/issues/modal.tsx

@@ -538,8 +538,6 @@ 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"
@@ -549,7 +547,9 @@ export const CreateUpdateIssueModal: React.FC<IssuesModalProps> = observer(
               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">
+              <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}
                     />
+                  </div>
+                </div>
               </Dialog.Panel>
             </Transition.Child>
-              </div>
-            </div>
           </Dialog>
         </Transition.Root>
       </>

web/components/issues/peek-overview/layout.tsx

@@ -102,7 +102,6 @@ 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"
@@ -112,7 +111,8 @@ export const IssuePeekOverview: React.FC<Props> = observer(
               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">
+              <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}
                   />
+                </div>
               </Dialog.Panel>
             </Transition.Child>
-            </div>
           </Dialog>
         </Transition.Root>
         <Transition.Root appear show={isModalPeekOpen} as={React.Fragment}>