diff --git a/src/styles/phoenix-pro.less b/src/styles/phoenix-pro.less
index 2e9831f58f..b7302d28cb 100644
--- a/src/styles/phoenix-pro.less
+++ b/src/styles/phoenix-pro.less
@@ -53,11 +53,21 @@
 
 .pro-upgrade-dialog.modal {
   width: 880px;
+  max-width: ~"min(calc(100vw - 32px), calc((100vh - 280px) * 16 / 9))";
+
+  display: flex;
+  flex-direction: column;
+  overflow: hidden !important;
 
   .modal-header {
+    flex: 0 0 auto;
     padding-bottom: 12px;
   }
 
+  .modal-footer {
+    flex: 0 0 auto;
+  }
+
   .dialog-subtitle {
     margin: 6px 0 0;
     font-size: 13px;
@@ -66,8 +76,11 @@
   }
 
   .modal-body {
+    flex: 1 1 auto;
+    min-height: 0;
     padding: 0;
     max-height: none;
+    overflow: auto;
   }
 
   .feature-carousel {
@@ -76,11 +89,12 @@
     user-select: none;
   }
 
-  /* ---- Media stage: video area with arrows + dots (16:9 at 880 wide) ---- */
   .feature-stage {
     position: relative;
     width: 100%;
-    height: 495px;
+    height: auto;
+    aspect-ratio: 16 / 9;
+    max-height: ~"min(495px, calc(100vh - 280px))";
     overflow: hidden;
     background: #1b1b1b;
   }