fix: make modal use viewport breakpoints (#7246)

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;
+    }
+  }
 }

src/components/Dialog.tsx

@@ -49,7 +49,7 @@ export const Dialog = (props: DialogProps) => {
   const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
   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 (
     <Modal
-      className={clsx("Dialog", props.className)}
+      className={clsx("Dialog", props.className, {
+        "Dialog--fullscreen": isFullscreen,
+      })}
       labelledBy="dialog-title"
       maxWidth={getDialogSize(props.size)}
       onCloseRequest={onClose}
@@ -119,7 +121,7 @@ export const Dialog = (props: DialogProps) => {
           title={t("buttons.close")}
           aria-label={t("buttons.close")}
         >
-          {device.editor.isMobile ? back : CloseIcon}
+          {isFullscreen ? back : CloseIcon}
         </button>
         <div className="Dialog__content">{props.children}</div>
       </Island>

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