diff --git a/apps/frontend/src/components/launches/calendar.tsx b/apps/frontend/src/components/launches/calendar.tsx index 1edb19da..67b176bd 100644 --- a/apps/frontend/src/components/launches/calendar.tsx +++ b/apps/frontend/src/components/launches/calendar.tsx @@ -548,16 +548,16 @@ export const CalendarColumn: FC<{ if (set === 'exit') return; modal.openModal({ + id: 'add-edit-modal', closeOnClickOutside: false, + removeLayout: true, closeOnEscape: false, withCloseButton: false, - removeLayout: true, - fullScreen: true, askClose: true, + fullScreen: true, classNames: { - modal: 'fixed left-0 top-0 w-full h-full', + modal: 'w-[100%] max-w-[1400px] text-textColor', }, - id: 'add-edit-modal', children: ( ({ diff --git a/apps/frontend/src/components/launches/generator/generator.tsx b/apps/frontend/src/components/launches/generator/generator.tsx index 6669a514..67ac5f8c 100644 --- a/apps/frontend/src/components/launches/generator/generator.tsx +++ b/apps/frontend/src/components/launches/generator/generator.tsx @@ -150,15 +150,16 @@ const FirstStep: FC = (props) => { }); setShowStep(''); modal.openModal({ + id: 'add-edit-modal', closeOnClickOutside: false, + removeLayout: true, closeOnEscape: false, withCloseButton: false, - removeLayout: true, askClose: true, + fullScreen: true, classNames: { - modal: 'w-[100%] max-w-[1400px] bg-transparent text-textColor', + modal: 'w-[100%] max-w-[1400px] text-textColor', }, - id: 'add-edit-modal', children: ( ({ diff --git a/apps/frontend/src/components/launches/menu/menu.tsx b/apps/frontend/src/components/launches/menu/menu.tsx index bca334d1..b46fbb8a 100644 --- a/apps/frontend/src/components/launches/menu/menu.tsx +++ b/apps/frontend/src/components/launches/menu/menu.tsx @@ -1,7 +1,13 @@ 'use client'; import React, { - FC, MouseEventHandler, useCallback, useLayoutEffect, useMemo, useRef, useState + FC, + MouseEventHandler, + useCallback, + useLayoutEffect, + useMemo, + useRef, + useState, } from 'react'; import { useClickOutside } from '@mantine/hooks'; import { useFetch } from '@gitroom/helpers/utils/custom.fetch'; @@ -56,7 +62,7 @@ export const Menu: FC<{ const { integrations, reloadCalendarView } = useCalendar(); const toast = useToaster(); const modal = useModals(); - const [show, setShow] = useState(false); + const [show, setShow] = useState(false); const menuRef = useRef(null); const ref = useClickOutside(() => { setShow(false); @@ -69,13 +75,16 @@ export const Menu: FC<{ const menuRect = menuRef.current.getBoundingClientRect(); const viewportHeight = window.innerHeight; const padding = 10; - + // Check if menu overflows bottom of viewport if (menuRect.bottom > viewportHeight - padding) { - const newY = Math.max(padding, viewportHeight - menuRect.height - padding); + const newY = Math.max( + padding, + viewportHeight - menuRect.height - padding + ); // Only update if position actually changed significantly to avoid infinite loop if (Math.abs(show.y - newY) > 1) { - setShow(prev => prev ? { ...prev, y: newY } : false); + setShow((prev) => (prev ? { ...prev, y: newY } : false)); } } } @@ -88,7 +97,11 @@ export const Menu: FC<{ e.stopPropagation(); // @ts-ignore const boundBox = showRef?.current?.getBoundingClientRect(); - setShow(show ? false : { x: boundBox?.left, y: boundBox?.top + boundBox?.height }); + setShow( + show + ? false + : { x: boundBox?.left, y: boundBox?.top + boundBox?.height } + ); }, [show] ); @@ -184,15 +197,16 @@ export const Menu: FC<{ ).json(); modal.openModal({ + id: 'add-edit-modal', closeOnClickOutside: false, + removeLayout: true, closeOnEscape: false, withCloseButton: false, - removeLayout: true, askClose: true, + fullScreen: true, classNames: { - modal: 'w-[100%] max-w-[1400px] bg-transparent text-textColor', + modal: 'w-[100%] max-w-[1400px] text-textColor', }, - id: 'add-edit-modal', children: ( ({ @@ -329,7 +343,7 @@ export const Menu: FC<{
e.stopPropagation()} - style={{left: show.x, top: show.y}} + style={{ left: show.x, top: show.y }} className={`fixed p-[12px] bg-newBgColorInner shadow-menu flex flex-col gap-[16px] z-[100] rounded-[8px] border border-tableBorder text-nowrap`} > {canDisable && !findIntegration?.refreshNeeded && ( diff --git a/apps/frontend/src/components/launches/new.post.tsx b/apps/frontend/src/components/launches/new.post.tsx index 2bd3b35b..d011290c 100644 --- a/apps/frontend/src/components/launches/new.post.tsx +++ b/apps/frontend/src/components/launches/new.post.tsx @@ -48,15 +48,16 @@ export const NewPost = () => { if (set === 'exit') return; modal.openModal({ + id: 'add-edit-modal', closeOnClickOutside: false, + removeLayout: true, closeOnEscape: false, withCloseButton: false, - removeLayout: true, askClose: true, + fullScreen: true, classNames: { - modal: 'w-[100%] max-w-[1400px] bg-transparent text-textColor', + modal: 'w-[100%] max-w-[1400px] text-textColor', }, - id: 'add-edit-modal', children: ( ({ diff --git a/apps/frontend/src/components/sets/sets.tsx b/apps/frontend/src/components/sets/sets.tsx index a37ae809..1116b55a 100644 --- a/apps/frontend/src/components/sets/sets.tsx +++ b/apps/frontend/src/components/sets/sets.tsx @@ -93,15 +93,16 @@ export const Sets: FC = () => { const addSet = useCallback( (params?: { id?: string; name?: string; content?: string }) => () => { modal.openModal({ + id: 'add-edit-modal', closeOnClickOutside: false, removeLayout: true, closeOnEscape: false, withCloseButton: false, + askClose: true, fullScreen: true, classNames: { modal: 'w-[100%] max-w-[1400px] text-textColor', }, - id: 'add-edit-modal', children: ( ({