diff --git a/src/components/main/premium/PremiumMainModal.module.scss b/src/components/main/premium/PremiumMainModal.module.scss index 1f97d5abc..a4af09aaa 100644 --- a/src/components/main/premium/PremiumMainModal.module.scss +++ b/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 { diff --git a/src/components/main/premium/PremiumMainModal.tsx b/src/components/main/premium/PremiumMainModal.tsx index 88a9433f2..13c3e7e94 100644 --- a/src/components/main/premium/PremiumMainModal.tsx +++ b/src/components/main/premium/PremiumMainModal.tsx @@ -429,6 +429,7 @@ const PremiumMainModal: FC = ({ return ( = ({ isMinimizedState && styles.minimized, isFullScreen && styles.fullScreen, )} + dialogClassName="mini-app-modal-dialog" dialogStyle={supportMultiTabMode ? draggableStyle : undefined} dialogContent={isDraggingEnabled && !isMinimizedState ? renderResizeHandles() : undefined} isOpen={isOpen} diff --git a/src/components/ui/Modal.scss b/src/components/ui/Modal.scss index ba919b405..e7dd8cb10 100644 --- a/src/components/ui/Modal.scss +++ b/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 {