From f661e06582ee8594978336ee22a9007fca9f1537 Mon Sep 17 00:00:00 2001
From: Vamsi Krishna <46787868+vamsikrishnamathala@users.noreply.github.com>
Date: Fri, 11 Jul 2025 16:41:27 +0530
Subject: [PATCH] [WEB-4480]fix: full screen modals (#7392)

---
 .../core/components/command-palette/shortcuts-modal/modal.tsx | 4 ++--
 .../components/core/modals/existing-issues-list-modal.tsx     | 4 ++--
 apps/web/core/components/dropdowns/date.tsx                   | 2 +-
 apps/web/core/components/dropdowns/member/member-options.tsx  | 2 +-
 apps/web/core/components/inbox/modals/select-duplicate.tsx    | 4 ++--
 apps/web/core/components/issues/archive-issue-modal.tsx       | 4 ++--
 apps/web/core/components/issues/confirm-issue-discard.tsx     | 4 ++--
 apps/web/core/components/issues/parent-issues-list-modal.tsx  | 4 ++--
 packages/ui/src/dropdowns/custom-menu.tsx                     | 4 ++--
 packages/ui/src/dropdowns/custom-search-select.tsx            | 2 +-
 packages/ui/src/modals/modal-core.tsx                         | 4 ++--
 11 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/web/core/components/command-palette/shortcuts-modal/modal.tsx b/apps/web/core/components/command-palette/shortcuts-modal/modal.tsx
index f4076db4c..0cf5f3ab9 100644
--- a/apps/web/core/components/command-palette/shortcuts-modal/modal.tsx
+++ b/apps/web/core/components/command-palette/shortcuts-modal/modal.tsx
@@ -25,7 +25,7 @@ export const ShortcutsModal: FC<Props> = (props) => {
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+      <Dialog as="div" className="relative z-30" onClose={handleClose}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -38,7 +38,7 @@ export const ShortcutsModal: FC<Props> = (props) => {
           <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
+        <div className="fixed inset-0 z-30 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={Fragment}
diff --git a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
index 4ab6fe014..b516d96af 100644
--- a/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
+++ b/apps/web/core/components/core/modals/existing-issues-list-modal.tsx
@@ -128,7 +128,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
   return (
     <>
       <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
-        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Dialog as="div" className="relative z-30" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
             enter="ease-out duration-300"
@@ -141,7 +141,7 @@ export const ExistingIssuesListModal: React.FC<Props> = (props) => {
             <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
           </Transition.Child>
 
-          <div className="fixed inset-0 z-10 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
diff --git a/apps/web/core/components/dropdowns/date.tsx b/apps/web/core/components/dropdowns/date.tsx
index 1dd0105ad..803a606e3 100644
--- a/apps/web/core/components/dropdowns/date.tsx
+++ b/apps/web/core/components/dropdowns/date.tsx
@@ -170,7 +170,7 @@ export const DateDropdown: React.FC<Props> = observer((props) => {
           <Combobox.Options data-prevent-outside-click static>
             <div
               className={cn(
-                "my-1 bg-custom-background-100 shadow-custom-shadow-rg border-[0.5px] border-custom-border-300 rounded-md overflow-hidden z-20",
+                "my-1 bg-custom-background-100 shadow-custom-shadow-rg border-[0.5px] border-custom-border-300 rounded-md overflow-hidden z-30",
                 optionsClassName
               )}
               ref={setPopperElement}
diff --git a/apps/web/core/components/dropdowns/member/member-options.tsx b/apps/web/core/components/dropdowns/member/member-options.tsx
index f2cea10fa..189778d46 100644
--- a/apps/web/core/components/dropdowns/member/member-options.tsx
+++ b/apps/web/core/components/dropdowns/member/member-options.tsx
@@ -114,7 +114,7 @@ export const MemberOptions: React.FC<Props> = observer((props: Props) => {
     <Combobox.Options data-prevent-outside-click static>
       <div
         className={cn(
-          "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-20",
+          "my-1 w-48 rounded border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none z-30",
           optionsClassName
         )}
         ref={setPopperElement}
diff --git a/apps/web/core/components/inbox/modals/select-duplicate.tsx b/apps/web/core/components/inbox/modals/select-duplicate.tsx
index d0484ce66..39d66beec 100644
--- a/apps/web/core/components/inbox/modals/select-duplicate.tsx
+++ b/apps/web/core/components/inbox/modals/select-duplicate.tsx
@@ -123,7 +123,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
     <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
       <div className="flex flex-wrap items-start">
         <div className="space-y-1 sm:basis-1/2">
-          <Dialog as="div" className="relative z-20" onClose={handleClose}>
+          <Dialog as="div" className="relative z-30" onClose={handleClose}>
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
@@ -136,7 +136,7 @@ export const SelectDuplicateInboxIssueModal: React.FC<Props> = (props) => {
               <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
             </Transition.Child>
 
-            <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
+            <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
               <Transition.Child
                 as={React.Fragment}
                 enter="ease-out duration-300"
diff --git a/apps/web/core/components/issues/archive-issue-modal.tsx b/apps/web/core/components/issues/archive-issue-modal.tsx
index f43964d88..9d2037ff4 100644
--- a/apps/web/core/components/issues/archive-issue-modal.tsx
+++ b/apps/web/core/components/issues/archive-issue-modal.tsx
@@ -64,7 +64,7 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={onClose}>
+      <Dialog as="div" className="relative z-30" onClose={onClose}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -77,7 +77,7 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
           <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-30 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <Transition.Child
               as={Fragment}
diff --git a/apps/web/core/components/issues/confirm-issue-discard.tsx b/apps/web/core/components/issues/confirm-issue-discard.tsx
index 7630af303..5e6f06fa1 100644
--- a/apps/web/core/components/issues/confirm-issue-discard.tsx
+++ b/apps/web/core/components/issues/confirm-issue-discard.tsx
@@ -32,7 +32,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
 
   return (
     <Transition.Root show={isOpen} as={React.Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={handleClose}>
+      <Dialog as="div" className="relative z-30" onClose={handleClose}>
         <Transition.Child
           as={React.Fragment}
           enter="ease-out duration-300"
@@ -45,7 +45,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
           <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-10 overflow-y-auto">
+        <div className="fixed inset-0 z-30 overflow-y-auto">
           <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-32">
             <Transition.Child
               as={React.Fragment}
diff --git a/apps/web/core/components/issues/parent-issues-list-modal.tsx b/apps/web/core/components/issues/parent-issues-list-modal.tsx
index 835663a94..64f013e0f 100644
--- a/apps/web/core/components/issues/parent-issues-list-modal.tsx
+++ b/apps/web/core/components/issues/parent-issues-list-modal.tsx
@@ -89,7 +89,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
   return (
     <>
       <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear>
-        <Dialog as="div" className="relative z-20" onClose={handleClose}>
+        <Dialog as="div" className="relative z-30" onClose={handleClose}>
           <Transition.Child
             as={React.Fragment}
             enter="ease-out duration-300"
@@ -102,7 +102,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
             <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
           </Transition.Child>
 
-          <div className="fixed inset-0 z-20 overflow-y-auto p-4 sm:p-6 md:p-20">
+          <div className="fixed inset-0 z-30 overflow-y-auto p-4 sm:p-6 md:p-20">
             <Transition.Child
               as={React.Fragment}
               enter="ease-out duration-300"
diff --git a/packages/ui/src/dropdowns/custom-menu.tsx b/packages/ui/src/dropdowns/custom-menu.tsx
index d043ced70..103bd20e1 100644
--- a/packages/ui/src/dropdowns/custom-menu.tsx
+++ b/packages/ui/src/dropdowns/custom-menu.tsx
@@ -186,7 +186,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
     <Menu.Items
       data-prevent-outside-click={!!portalElement}
       className={cn(
-        "fixed z-10 translate-y-0",
+        "fixed z-30 translate-y-0",
         menuItemsClassName
       )} /** translate-y-0 is a hack to create new stacking context. Required for safari  */
       static
@@ -414,7 +414,7 @@ const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
             style={styles.popper}
             {...attributes.popper}
             className={cn(
-              "fixed z-[20] min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-1 text-xs shadow-custom-shadow-lg",
+              "fixed z-30 min-w-[12rem] overflow-hidden rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 p-1 text-xs shadow-custom-shadow-lg",
               "ring-1 ring-black ring-opacity-5", // Additional styling to make it stand out
               contentClassName
             )}
diff --git a/packages/ui/src/dropdowns/custom-search-select.tsx b/packages/ui/src/dropdowns/custom-search-select.tsx
index d26163e69..68fb90cb5 100644
--- a/packages/ui/src/dropdowns/custom-search-select.tsx
+++ b/packages/ui/src/dropdowns/custom-search-select.tsx
@@ -138,7 +138,7 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                 <Combobox.Options data-prevent-outside-click static>
                   <div
                     className={cn(
-                      "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-48 whitespace-nowrap z-20",
+                      "my-1 overflow-y-scroll rounded-md border-[0.5px] border-custom-border-300 bg-custom-background-100 px-2 py-2.5 text-xs shadow-custom-shadow-rg focus:outline-none min-w-48 whitespace-nowrap z-30",
                       optionsClassName
                     )}
                     ref={setPopperElement}
diff --git a/packages/ui/src/modals/modal-core.tsx b/packages/ui/src/modals/modal-core.tsx
index 534cb27ce..798917481 100644
--- a/packages/ui/src/modals/modal-core.tsx
+++ b/packages/ui/src/modals/modal-core.tsx
@@ -25,7 +25,7 @@ export const ModalCore: React.FC<Props> = (props) => {
 
   return (
     <Transition.Root show={isOpen} as={Fragment}>
-      <Dialog as="div" className="relative z-20" onClose={() => handleClose && handleClose()}>
+      <Dialog as="div" className="relative z-30" onClose={() => handleClose && handleClose()}>
         <Transition.Child
           as={Fragment}
           enter="ease-out duration-300"
@@ -38,7 +38,7 @@ export const ModalCore: React.FC<Props> = (props) => {
           <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
         </Transition.Child>
 
-        <div className="fixed inset-0 z-20 overflow-y-auto">
+        <div className="fixed inset-0 z-30 overflow-y-auto">
           <div className={position}>
             <Transition.Child
               as={Fragment}