Mirrors/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-07-13 14:01:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-4473]fix: updated epic full screen to use portal (#3643)

Browse Source 
* fix: updated full screen to use portal

* fix: z-index for modals
This commit is contained in:
Vamsi Krishna
2025-07-11 16:46:55 +05:30
committed by GitHub
parent 7fe6ec7d38
commit 1268bd06f8
15 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web/core/components/command-palette/shortcuts-modal/modal.tsx
View File

@@ -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}

4
apps/web/core/components/core/modals/existing-issues-list-modal.tsx
View File

@@ -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"

2
apps/web/core/components/dropdowns/date.tsx
View File

@@ -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}

2
apps/web/core/components/dropdowns/member/member-options.tsx
View File

@@ -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}

2
apps/web/core/components/inbox/modals/select-duplicate.tsx
View File

@@ -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"

4
apps/web/core/components/issues/archive-issue-modal.tsx
View File

@@ -66,7 +66,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"
@@ -79,7 +79,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}

2
apps/web/core/components/issues/confirm-issue-discard.tsx
View File

@@ -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"

4
apps/web/core/components/issues/parent-issues-list-modal.tsx
View File

@@ -92,7 +92,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"
@@ -105,7 +105,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"

4
apps/web/ee/components/command-palette/shortcuts-modal/modal.tsx
View File

@@ -23,7 +23,7 @@ export const PagesAppShortcutsModal: 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"
@@ -36,7 +36,7 @@ export const PagesAppShortcutsModal: 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}

14
apps/web/ee/components/epics/peek-overview/view.tsx
View File

@@ -17,6 +17,7 @@ import { EpicDetailRoot } from "../details/root";
import { EpicPeekOverviewError } from "./error";
import { EpicPeekOverviewHeader, TPeekModes } from "./header";
import { EpicPeekOverviewLoader } from "./loader";
import { createPortal } from "react-dom";
interface IEpicView {
workspaceSlug: string;
@@ -117,19 +118,24 @@ export const EpicView: FC<IEpicView> = observer((props) => {
const peekOverviewIssueClassName = cn(
!embedIssue
? "fixed z-20 flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300"
? "fixed z-[25] flex flex-col overflow-hidden rounded border border-custom-border-200 bg-custom-background-100 transition-all duration-300"
: `w-full h-full`,
!embedIssue && {
"bottom-0 right-0 top-0 w-full lg:w-[1024px] border-0 border-l": peekMode === "side-peek",
"size-5/6 top-[8.33%] left-[8.33%]": peekMode === "modal",
"inset-0 m-4": peekMode === "full-screen",
"inset-0 m-4 absolute": peekMode === "full-screen",
}
);
const toggleEditEpicModal = (value: boolean) => setEditEpicModal(value);
const toggleDeleteEpicModal = (value: boolean) => setDeleteEpicModal(value);
const toggleDuplicateEpicModal = (value: boolean) => setDuplicateEpicModal(value);
return (
const shouldUsePortal = !embedIssue && peekMode === "full-screen";
const portalElement = document.getElementById("full-screen-portal");
const content = (
<>
{issueId && (
<div
@@ -178,4 +184,6 @@ export const EpicView: FC<IEpicView> = observer((props) => {
)}
</>
);
return shouldUsePortal && portalElement ? createPortal(content, portalElement) : content;
});

4
apps/web/ee/components/initiatives/details/main/collapsible-section/epics/workspace-epic-modal.tsx
View File

@@ -98,7 +98,7 @@ export const WorkspaceEpicsListModal: React.FC<Props> = observer((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"
@@ -111,7 +111,7 @@ export const WorkspaceEpicsListModal: React.FC<Props> = observer((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"

2
apps/web/ee/components/issues/issue-details/sidebar/preview.tsx
View File

@@ -26,7 +26,7 @@ export const CustomerPreview: FC<TProps> = (props) => {
const stage = CUSTOMER_STAGES.find((stage) => stage.value === customer?.stage);
return (
<div className="bg-custom-background-90/40">
<div ref={setPopperElement} className={"min-w-[350px] max-w-[400px] z-20"} style={styles.popper}>
<div ref={setPopperElement} className={"min-w-[350px] max-w-[400px] z-30"} style={styles.popper}>
<div className="bg-custom-background-100 border border-custom-border-200 rounded-lg p-5 shadow-custom-shadow-sm">
<div className="flex justify-between items-center">
<div className="flex gap-2 items-center truncate">

2
packages/ui/src/dropdowns/custom-menu.tsx
View File

@@ -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
)}

2
packages/ui/src/dropdowns/custom-search-select.tsx
View File

@@ -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}

4
packages/ui/src/modals/modal-core.tsx
View File

@@ -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}