Mobile: Fix mobile modal windows (#6885)

src/components/main/premium/PremiumMainModal.module.scss

@@ -158,15 +158,8 @@
 }
 
 @media (max-width: 600px) {
-  .root :global(.modal-dialog) {
-    width: 100%;
-    max-width: 100% !important;
-    height: 100%;
-    border-radius: 0;
-  }
-
   .root :global(.modal-content) {
-    max-height: 100vh;
+    max-height: 100%;
   }
 
   .root .transition {

src/components/main/premium/PremiumMainModal.tsx

@@ -429,6 +429,7 @@ const PremiumMainModal: FC<OwnProps & StateProps> = ({
   return (
     <Modal
       className={styles.root}
+      dialogClassName="premium-main-modal-dialog"
       onClose={closePremiumModal}
       isOpen={isOpen}
       dialogRef={dialogRef}

src/components/modals/gift/GiftModal.module.scss

@@ -21,25 +21,12 @@
 }
 
 @media (max-width: 600px) {
-  .root :global(.modal-dialog),
   .transition,
   .content {
     height: 100%;
   }
 }
 
-@media (max-width: 600px) {
-  .root :global(.modal-dialog) {
-    width: 100%;
-    max-width: 100% !important;
-    height: 100%;
-    border: none !important;
-    border-radius: 0;
-
-    box-shadow: none !important;
-  }
-}
-
 .root :global(.modal-dialog),
 .root :global(.modal-content),
 .transition {

src/components/modals/webApp/WebAppModal.tsx

@@ -687,6 +687,7 @@ const WebAppModal: FC<OwnProps & StateProps> = ({
         isMinimizedState && styles.minimized,
         isFullScreen && styles.fullScreen,
       )}
+      dialogClassName="mini-app-modal-dialog"
       dialogStyle={supportMultiTabMode ? draggableStyle : undefined}
       dialogContent={isDraggingEnabled && !isMinimizedState ? renderResizeHandles() : undefined}
       isOpen={isOpen}

src/components/ui/Modal.scss

@@ -114,6 +114,25 @@
       @media (max-width: 450px) {
         max-width: calc(100vw - 3rem) !important;
       }
+
+      @media (max-width: 450px) {
+        &.mini-app-modal-dialog {
+          width: 100vw !important;
+          max-width: 100vw !important;
+          margin: 0 !important;
+          border-radius: 0;
+        }
+      }
+
+      @media (max-width: 600px) {
+        &.premium-main-modal-dialog {
+          width: 100% !important;
+          max-width: 100% !important;
+          height: 100%;
+          margin: 0;
+          border-radius: 0;
+        }
+      }
     }
 
     &.open .modal-dialog {