From 9a22b255645287bad642d3e320a23d584121990e Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Sun, 24 Apr 2022 17:29:49 +0530
Subject: [PATCH] Show popup window in full screen at mobile devices

---
 src/app/molecules/dialog/Dialog.jsx             |  2 +-
 src/app/molecules/dialog/Dialog.scss            |  2 +-
 src/app/molecules/popup-window/PopupWindow.jsx  |  3 ++-
 src/app/molecules/popup-window/PopupWindow.scss | 11 ++++++++++-
 src/app/molecules/room-tile/RoomTile.jsx        |  1 -
 src/app/organisms/drag-drop/DragDrop.jsx        |  2 +-
 src/app/organisms/drag-drop/DragDrop.scss       |  2 +-
 src/app/organisms/search/Search.jsx             |  2 +-
 src/app/organisms/search/Search.scss            |  2 +-
 9 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/app/molecules/dialog/Dialog.jsx b/src/app/molecules/dialog/Dialog.jsx
index a59520f6..2f29971d 100644
--- a/src/app/molecules/dialog/Dialog.jsx
+++ b/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}
diff --git a/src/app/molecules/dialog/Dialog.scss b/src/app/molecules/dialog/Dialog.scss
index 77e5f059..269d909e 100644
--- a/src/app/molecules/dialog/Dialog.scss
+++ b/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;
diff --git a/src/app/molecules/popup-window/PopupWindow.jsx b/src/app/molecules/popup-window/PopupWindow.jsx
index 1133252a..4179f49a 100644
--- a/src/app/molecules/popup-window/PopupWindow.jsx
+++ b/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}
diff --git a/src/app/molecules/popup-window/PopupWindow.scss b/src/app/molecules/popup-window/PopupWindow.scss
index f03d1dcd..3251b02d 100644
--- a/src/app/molecules/popup-window/PopupWindow.scss
+++ b/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 {
diff --git a/src/app/molecules/room-tile/RoomTile.jsx b/src/app/molecules/room-tile/RoomTile.jsx
index 7dd4292b..95481ece 100644
--- a/src/app/molecules/room-tile/RoomTile.jsx
+++ b/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';
 
diff --git a/src/app/organisms/drag-drop/DragDrop.jsx b/src/app/organisms/drag-drop/DragDrop.jsx
index 4fd0bb7f..e92f8a70 100644
--- a/src/app/organisms/drag-drop/DragDrop.jsx
+++ b/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}
     >
diff --git a/src/app/organisms/drag-drop/DragDrop.scss b/src/app/organisms/drag-drop/DragDrop.scss
index 6361553f..2e5b4f51 100644
--- a/src/app/organisms/drag-drop/DragDrop.scss
+++ b/src/app/organisms/drag-drop/DragDrop.scss
@@ -1,4 +1,4 @@
-.drag-drop__model {
+.drag-drop__modal {
   box-shadow: none;
   text-align: center;
 
diff --git a/src/app/organisms/search/Search.jsx b/src/app/organisms/search/Search.jsx
index 1eddbf67..d40d8615 100644
--- a/src/app/organisms/search/Search.jsx
+++ b/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}
diff --git a/src/app/organisms/search/Search.scss b/src/app/organisms/search/Search.scss
index 97106e0a..3612d742 100644
--- a/src/app/organisms/search/Search.scss
+++ b/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);