diff --git a/src/components/Dialog.scss b/src/components/Dialog.scss index 405f9235..22f3f942 100644 --- a/src/components/Dialog.scss +++ b/src/components/Dialog.scss @@ -33,14 +33,16 @@ color: var(--color-gray-40); } - @include isMobile { - top: 1.25rem; - right: 1.25rem; - } - svg { width: 1.5rem; height: 1.5rem; } } + + .Dialog--fullscreen { + .Dialog__close { + top: 1.25rem; + right: 1.25rem; + } + } } diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index 71087996..f120e491 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -49,7 +49,7 @@ export const Dialog = (props: DialogProps) => { const [islandNode, setIslandNode] = useCallbackRefState(); const [lastActiveElement] = useState(document.activeElement); const { id } = useExcalidrawContainer(); - const device = useDevice(); + const isFullscreen = useDevice().viewport.isMobile; useEffect(() => { if (!islandNode) { @@ -101,7 +101,9 @@ export const Dialog = (props: DialogProps) => { return ( { title={t("buttons.close")} aria-label={t("buttons.close")} > - {device.editor.isMobile ? back : CloseIcon} + {isFullscreen ? back : CloseIcon}
{props.children}
diff --git a/src/components/Modal.scss b/src/components/Modal.scss index ad2d0c56..f71af71a 100644 --- a/src/components/Modal.scss +++ b/src/components/Modal.scss @@ -59,12 +59,6 @@ &:focus { outline: none; } - - @include isMobile { - max-width: 100%; - border: 0; - border-radius: 0; - } } @keyframes Modal__background__fade-in { @@ -105,7 +99,7 @@ } } - @include isMobile { + .Dialog--fullscreen { .Modal { padding: 0; } @@ -116,6 +110,9 @@ left: 0; right: 0; bottom: 0; + max-width: 100%; + border: 0; + border-radius: 0; } } }