Show popup window in full screen at mobile devices

src/app/molecules/dialog/Dialog.jsx

@@ -16,7 +16,7 @@ function Dialog({
 }) {
   return (
     <RawModal
-      className={`${className === null ? '' : `${className} `}dialog-model`}
+      className={`${className === null ? '' : `${className} `}dialog-modal`}
       isOpen={isOpen}
       onAfterOpen={onAfterOpen}
       onAfterClose={onAfterClose}

src/app/molecules/dialog/Dialog.scss

@@ -1,4 +1,4 @@
-.dialog-model {
+.dialog-modal {
   --modal-height: 656px;
   max-height: min(100%, var(--modal-height));
   display: flex;

src/app/molecules/popup-window/PopupWindow.jsx

@@ -58,7 +58,8 @@ function PopupWindow({
 
   return (
     <RawModal
-      className={`${className === null ? '' : `${className} `}pw-model`}
+      className={`${className === null ? '' : `${className} `}pw-modal`}
+      overlayClassName="pw-modal__overlay"
       isOpen={isOpen}
       onAfterClose={onAfterClose}
       onRequestClose={onRequestClose}

src/app/molecules/popup-window/PopupWindow.scss

@@ -1,9 +1,18 @@
 @use '../../partials/dir';
+@use '../../partials/screen';
 
-.pw-model {
+.pw-modal {
   --modal-height: 774px;
   max-height: var(--modal-height) !important;
   height: 100%;
+
+  @include screen.smallerThan(mobileBreakpoint) {
+    --modal-height: 100%;
+    border-radius: 0 !important;
+    &__overlay {
+      padding: 0 !important;
+    }
+  }
 }
 
 .pw {

src/app/molecules/room-tile/RoomTile.jsx

@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import './RoomTile.scss';
 
 import { twemojify } from '../../../util/twemojify';
-import { sanitizeText } from '../../../util/sanitize';
 
 import colorMXID from '../../../util/colorMXID';
 

src/app/organisms/drag-drop/DragDrop.jsx

@@ -8,7 +8,7 @@ import Text from '../../atoms/text/Text';
 function DragDrop({ isOpen }) {
   return (
     <RawModal
-      className="drag-drop__model"
+      className="drag-drop__modal"
       overlayClassName="drag-drop__overlay"
       isOpen={isOpen}
     >

src/app/organisms/drag-drop/DragDrop.scss

@@ -1,4 +1,4 @@
-.drag-drop__model {
+.drag-drop__modal {
   box-shadow: none;
   text-align: center;
 

src/app/organisms/search/Search.jsx

@@ -199,7 +199,7 @@ function Search() {
 
   return (
     <RawModal
-      className="search-dialog__model dialog-model"
+      className="search-dialog__modal dialog-modal"
       isOpen={isOpen}
       onAfterOpen={handleAfterOpen}
       onAfterClose={handleAfterClose}

src/app/organisms/search/Search.scss

@@ -1,6 +1,6 @@
 @use '../../partials/dir';
 
-.search-dialog__model {
+.search-dialog__modal {
   --modal-height: 380px;
   height: 100%;
   background-color: var(--bg-surface);