fix(ui): ensure unpublish confirmation is reachable when opened in dr…

…awers (#10109)  ### What? This PR fixes an issue where the unpublish modal was unreachable due to the high `z-index` on `Drawer` components. This makes unpublishing documents from a drawer impossible. For example, when editting a document from the drawer opened in a `RelationshipTable`. ### Why? To allow editors to be able to unpublish docs regardless of drawer depth and context. ### How? By rendering the unpublish modal at a sufficiently high z-index, while taking into account edit depth. Fixes #10108 Before: [Dashboard-unpublish-before--Payload.webm](https://github.com/user-attachments/assets/7acf1002-138e-48bd-81ec-76f5eabfb2d4) After: [Dashboard-unpublish-after--Payload.webm](https://github.com/user-attachments/assets/ff109ee9-5b63-43d0-931f-500ded8f6d3a)
payloadcms · Dec 20, 2024 · ec853c4 · ec853c4
1 parent 2175451
commit ec853c4
Showing 1 changed file with 9 additions and 1 deletion.
diff --git a/packages/ui/src/elements/Status/index.tsx b/packages/ui/src/elements/Status/index.tsx
@@ -6,10 +6,12 @@ import { toast } from 'sonner'
 import { useForm } from '../../forms/Form/context.js'
 import { useConfig } from '../../providers/Config/index.js'
 import { useDocumentInfo } from '../../providers/DocumentInfo/index.js'
+import { useEditDepth } from '../../providers/EditDepth/index.js'
 import { useLocale } from '../../providers/Locale/index.js'
 import { useTranslation } from '../../providers/Translation/index.js'
 import { requests } from '../../utilities/api.js'
 import { Button } from '../Button/index.js'
+import { drawerZBase } from '../Drawer/index.js'
 import './index.scss'
 
 const baseClass = 'status'
@@ -36,6 +38,8 @@ export const Status: React.FC = () => {
   const { code: locale } = useLocale()
   const { i18n, t } = useTranslation()
 
+  const editDepth = useEditDepth()
+
   const unPublishModalSlug = `confirm-un-publish-${id}`
   const revertModalSlug = `confirm-revert-${id}`
 
@@ -159,7 +163,11 @@ export const Status: React.FC = () => {
               >
                 {t('version:unpublish')}
               </Button>
-              <Modal className={`${baseClass}__modal`} slug={unPublishModalSlug}>
+              <Modal
+                className={`${baseClass}__modal`}
+                slug={unPublishModalSlug}
+                style={{ zIndex: drawerZBase + editDepth }}
+              >
                 <div className={`${baseClass}__wrapper`}>
                   <div className={`${baseClass}__content`}>
                     <h1>{t('version:confirmUnpublish')}</h1>