From 7924810b2377030e1d0e553a2ef27235c689c278 Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Sat, 11 Nov 2023 17:53:16 -0600
Subject: [PATCH] fix dialogs on android

Dialogs were off of the screen due to the overlays being bigger than
the view port. This is fixed by adding some style to limit the size.

Also multi-step dialogs are hard-coded to have min-width of 800px in
blueprints.js, so we need to override this on smaller screens.

Fixes: https://github.com/pybricks/support/issues/1271
---
 CHANGELOG.md   |  5 +++++
 src/index.scss | 11 +++++++++++
 2 files changed, 16 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a8151eb5..308bc7aa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,6 +4,11 @@
 
 ## [Unreleased]
 
+### Fixed
+- Fixed dialogs not displaying correctly on Android ([support#1271]).
+
+[support#1271]: https://github.com/pybricks/support/issues/1271
+
 ## [2.2.0-beta.9] - 2023-10-26
 
 ### Changed
diff --git a/src/index.scss b/src/index.scss
index 3b662bca..79338a8c 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -178,6 +178,12 @@ a.#{bp.$ns}-button {
     }
 }
 
+@media only screen and (max-height: 800px) {
+    .#{bp.$ns}-dialog {
+        min-width: unset !important;
+    }
+}
+
 .#{bp.$ns}-control-group {
     gap: bp.$pt-grid-size * 0.5;
 }
@@ -202,6 +208,11 @@ a.#{bp.$ns}-button {
     }
 }
 
+.#{bp.$ns}-overlay {
+    width: 100vw;
+    height: 100vh;
+}
+
 // don't take up so much space when there is no caret
 .#{bp.$ns}-tree-node-caret-none {
     // $pt-grid-size / 2 matches padding on .#{bp.$ns}-tree-node-conent