binarybeach/bb-plane-fork
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[WEB-4480]fix: full screen modals (#7392)

Browse source
This commit is contained in:
Vamsi Krishna 2025-07-11 16:41:27 +05:30 • committed by GitHub
parent 86f3ff1bd2
commit f661e06582
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 19 additions and 19 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 ( return (
<Transition.Root show={isOpen} as={Fragment}> <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 <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" 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" /> <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child> </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"> <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-20">
<Transition.Child <Transition.Child
as={Fragment} 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 ( return (
<> <>
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear> <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 <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" 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" /> <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child> </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 <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" 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> <Combobox.Options data-prevent-outside-click static>
<div <div
className={cn( 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 optionsClassName
)} )}
ref={setPopperElement} 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> <Combobox.Options data-prevent-outside-click static>
<div <div
className={cn( 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 optionsClassName
)} )}
ref={setPopperElement} ref={setPopperElement}

4
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> <Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setQuery("")} appear>
<div className="flex flex-wrap items-start"> <div className="flex flex-wrap items-start">
<div className="space-y-1 sm:basis-1/2"> <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 <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" 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" /> <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child> </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 <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"

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

@ -64,7 +64,7 @@ export const ArchiveIssueModal: React.FC<Props> = (props) => {
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <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 <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" 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" /> <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child> </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"> <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}

4
apps/web/core/components/issues/confirm-issue-discard.tsx
View file

@ -32,7 +32,7 @@ export const ConfirmIssueDiscard: React.FC<Props> = (props) => {
return ( return (
<Transition.Root show={isOpen} as={React.Fragment}> <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 <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" 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" /> <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child> </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"> <div className="my-10 flex items-center justify-center p-4 text-center sm:p-0 md:my-32">
<Transition.Child <Transition.Child
as={React.Fragment} as={React.Fragment}

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

@ -89,7 +89,7 @@ export const ParentIssuesListModal: React.FC<Props> = ({
return ( return (
<> <>
<Transition.Root show={isOpen} as={React.Fragment} afterLeave={() => setSearchTerm("")} appear> <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 <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" 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" /> <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child> </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 <Transition.Child
as={React.Fragment} as={React.Fragment}
enter="ease-out duration-300" enter="ease-out duration-300"

4
packages/ui/src/dropdowns/custom-menu.tsx
View file

@ -186,7 +186,7 @@ const CustomMenu = (props: ICustomMenuDropdownProps) => {
<Menu.Items <Menu.Items
data-prevent-outside-click={!!portalElement} data-prevent-outside-click={!!portalElement}
className={cn( className={cn(
"fixed z-10 translate-y-0", "fixed z-30 translate-y-0",
menuItemsClassName menuItemsClassName
)} /** translate-y-0 is a hack to create new stacking context. Required for safari */ )} /** translate-y-0 is a hack to create new stacking context. Required for safari */
static static
@ -414,7 +414,7 @@ const SubMenu: React.FC<ICustomSubMenuProps> = (props) => {
style={styles.popper} style={styles.popper}
{...attributes.popper} {...attributes.popper}
className={cn( 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 "ring-1 ring-black ring-opacity-5", // Additional styling to make it stand out
contentClassName 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> <Combobox.Options data-prevent-outside-click static>
<div <div
className={cn( 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 optionsClassName
)} )}
ref={setPopperElement} ref={setPopperElement}

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

@ -25,7 +25,7 @@ export const ModalCore: React.FC<Props> = (props) => {
return ( return (
<Transition.Root show={isOpen} as={Fragment}> <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 <Transition.Child
as={Fragment} as={Fragment}
enter="ease-out duration-300" 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" /> <div className="fixed inset-0 bg-custom-backdrop transition-opacity" />
</Transition.Child> </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}> <div className={position}>
<Transition.Child <Transition.Child
as={Fragment} as={Fragment}