fix(COT-120): Fix dialog OK button clipped/inaccessible on small mobile viewports

cypress/e2e/game/viewport.cy.js

@@ -120,4 +120,27 @@ describe("viewport", () => {
             cy.contains("Next Wordle").should("be.visible").shouldBeInViewport();
         });
     });
+
+    [
+        {
+            name: "small mobile device",
+            width: 320,
+            height: 480,
+        },
+        {
+            name: "medium mobile device",
+            width: 375,
+            height: 667,
+        },
+    ].forEach((def) => {
+        it(`should show migration dialog OK button fully visible on a ${def.name}`, () => {
+            cy.viewport(def.width, def.height);
+
+            cy.get(".debug-link#debug").click();
+            cy.contains("Migration Dialog").click();
+
+            cy.get(".dialog").should("be.visible").shouldBeInViewport();
+            cy.get(".dialog .ok").should("be.visible").shouldBeInViewport();
+        });
+    });
 });

index.css

@@ -327,9 +327,14 @@ button.button > * {
     background-color: var(--dialog-background-color);
     color: var(--text-color);
     border: 1px solid black;
-    width: 300px;
+    width: 340px;
+    max-height: 90vh;
     height: auto;
     margin: 0;
+    padding: 0;
+
+    display: flex;
+    flex-direction: column;
 
     opacity: 1;
 
@@ -340,23 +345,20 @@ button.button > * {
 
 @media (max-width: 320px) {
     .dialog {
-        width: 250px;
+        width: 290px;
     }
 }
 
 .dialog > div.dialog-content {
     display: flex;
     flex-direction: column;
-    justify-content: center;
+    justify-content: flex-start;
     width: 100%;
-    height: 100%;
-    padding: 2rem;
+    padding: 2rem 2rem 0;
     box-sizing: border-box;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    overflow: auto;
+    overflow-y: auto;
+    flex: 1;
+    min-height: 0;
 }
 
 .dialog > div.dialog-content > div.dialog-text {

src/index.js

@@ -624,9 +624,9 @@ document.addEventListener("DOMContentLoaded", async () => {
             fadeIn: true,
             closable: true,
             style: {
-                width: "75%",
-                height: "75%",
-                maxWidth: "600px",
+                width: "calc(75% + 2em)",
+                height: "calc(75% + 2em)",
+                maxWidth: "640px",
             },
         });
     });