From 7a299a5c98daaea7b5074ff082260b60d9725913 Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Wed, 11 Oct 2023 17:51:19 +0200
Subject: [PATCH] Make Set Language Dialog properly scrollable on mobile
 devices by using the styling of Pair Device and Public Room Dialogs.

---
 public/styles.css                      | 23 ++++++++++++-----------
 public_included_ws_fallback/styles.css | 23 ++++++++++++-----------
 2 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/public/styles.css b/public/styles.css
index 9b06b4a..f5d3341 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -718,10 +718,12 @@ x-dialog x-background {
 }
 
 x-dialog x-paper {
+    display: flex;
+    flex-direction: column;
+    width: calc(100vw - 10px);
     z-index: 3;
     background: white;
     border-radius: 8px;
-    width: 100%;
     max-width: 400px;
     overflow: hidden;
     box-sizing: border-box;
@@ -729,6 +731,15 @@ x-dialog x-paper {
     will-change: transform;
 }
 
+#pair-device-dialog x-paper,
+#edit-paired-devices-dialog x-paper,
+#public-room-dialog x-paper,
+#language-select-dialog x-paper {
+    position: absolute;
+    top: max(50%, 350px);
+    margin-top: -328.5px;
+}
+
 x-paper > .row:first-of-type {
     background-color: var(--accent-color);
     border-bottom: solid 4px var(--border-color);
@@ -748,16 +759,6 @@ x-paper > .row:first-of-type h2 {
     --accent-color: var(--public-room-color);
 }
 
-#pair-device-dialog x-paper,
-#public-room-dialog x-paper {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: max(50%, 350px);
-    margin-top: -328.5px;
-    width: calc(100vw - 20px);
-}
-
 #pair-device-dialog ::-moz-selection,
 #pair-device-dialog ::selection {
     color: black;
diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css
index 749d501..fefa4cc 100644
--- a/public_included_ws_fallback/styles.css
+++ b/public_included_ws_fallback/styles.css
@@ -748,10 +748,12 @@ x-dialog x-background {
 }
 
 x-dialog x-paper {
+    display: flex;
+    flex-direction: column;
+    width: calc(100vw - 10px);
     z-index: 3;
     background: white;
     border-radius: 8px;
-    width: 100%;
     max-width: 400px;
     overflow: hidden;
     box-sizing: border-box;
@@ -759,6 +761,15 @@ x-dialog x-paper {
     will-change: transform;
 }
 
+#pair-device-dialog x-paper,
+#edit-paired-devices-dialog x-paper,
+#public-room-dialog x-paper,
+#language-select-dialog x-paper {
+    position: absolute;
+    top: max(50%, 350px);
+    margin-top: -328.5px;
+}
+
 x-paper > .row:first-of-type {
     background-color: var(--accent-color);
     border-bottom: solid 4px var(--border-color);
@@ -778,16 +789,6 @@ x-paper > .row:first-of-type h2 {
     --accent-color: var(--public-room-color);
 }
 
-#pair-device-dialog x-paper,
-#public-room-dialog x-paper {
-    display: flex;
-    flex-direction: column;
-    position: absolute;
-    top: max(50%, 350px);
-    margin-top: -328.5px;
-    width: calc(100vw - 20px);
-}
-
 #pair-device-dialog ::-moz-selection,
 #pair-device-dialog ::selection {
     color: black;