From e7031cea908873e66eaa282dadd10bbf636dff5f Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Sat, 9 Dec 2023 17:37:44 +0100
Subject: [PATCH] Flex-wrap buttons on dialogs to prevent overflowing

---
 public/index.html                 | 30 +++++++++++++-------------
 public/styles/deferred-styles.css | 25 +++++++++++++---------
 public/styles/styles-main.css     | 35 ++++++++++++++++++++++++-------
 3 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/public/index.html b/public/index.html
index a07981d..fecc9eb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -131,7 +131,7 @@
                     <span class="descriptor-other" hidden></span>
                 </div>
             </div>
-            <div class="center btn-row">
+            <div class="center btn-row wrap">
                 <div class="cancel-btn btn btn-small btn-rounded btn-dark text-white" data-i18n-key="header.cancel-share-mode" data-i18n-attrs="text"></div>
                 <div class="edit-btn btn btn-small btn-rounded btn-dark text-white" data-i18n-key="header.edit-share-mode" data-i18n-attrs="text" hidden></div>
             </div>
@@ -165,7 +165,7 @@
                 <div class="row center">
                     <span data-i18n-key="footer.discovery" data-i18n-attrs="text"></span>
                 </div>
-                <div class="row center">
+                <div class="row center wrap">
                     <span class="badge badge-room-ip" data-i18n-key="footer.on-this-network" data-i18n-attrs="text title"></span>
                     <span class="badge badge-room-secret pointer" data-i18n-key="footer.paired-devices" data-i18n-attrs="text title" hidden></span>
                     <span class="badge badge-room-public-id pointer" data-i18n-key="footer.public-room-devices" data-i18n-attrs="title" hidden>in room IAIAI</span>
@@ -251,7 +251,7 @@
                         <span>(Japanese)</span>
                     </button>
                 </div>
-                <div class="center row-reverse btn-row">
+                <div class="center row-reverse btn-row wrap">
                     <button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
                 </div>
             </x-paper>
@@ -294,7 +294,7 @@
                             <p class="font-subheading center text-center" data-i18n-key="dialogs.enter-key-from-another-device" data-i18n-attrs="text"></p>
                         </div>
                     </div>
-                    <div class="btn-row row-reverse">
+                    <div class="btn-row row-reverse wrap">
                         <button class="btn btn-rounded btn-grey" type="submit" data-i18n-key="dialogs.pair" data-i18n-attrs="text" disabled></button>
                         <button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close></button>
                     </div>
@@ -318,7 +318,7 @@
                             <span data-i18n-key="dialogs.auto-accept-instructions-2" data-i18n-attrs="text"></span>
                         </p>
                     </div>
-                    <div class="center row-reverse btn-row">
+                    <div class="center row-reverse btn-row wrap">
                         <button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
                     </div>
                 </x-paper>
@@ -361,10 +361,12 @@
                             <p class="font-subheading center text-center" data-i18n-key="dialogs.enter-room-id-from-another-device" data-i18n-attrs="text"></p>
                         </div>
                     </div>
-                    <div class="center row-reverse btn-row">
-                        <button class="btn btn-rounded btn-grey" type="submit" data-i18n-key="dialogs.join" data-i18n-attrs="text" disabled></button>
+                    <div class="center row-reverse btn-row wrap">
+                        <div class="row-reverse wrap grow-2">
+                            <button class="btn btn-rounded btn-grey" type="submit" data-i18n-key="dialogs.join" data-i18n-attrs="text" disabled></button>
+                            <button class="btn btn-rounded btn-grey leave-room" type="button" data-i18n-key="dialogs.leave" data-i18n-attrs="text"></button>
+                        </div>
                         <button class="btn btn-rounded btn-grey" type="button" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
-                        <button class="btn btn-rounded btn-grey leave-room" type="button" data-i18n-key="dialogs.leave" data-i18n-attrs="text"></button>
                     </div>
                 </x-paper>
             </x-background>
@@ -393,7 +395,7 @@
                     </div>
                 </div>
                 <div class="center file-preview"></div>
-                <div class="row-reverse center btn-row">
+                <div class="row-reverse center btn-row wrap">
                     <button id="accept-request" class="btn btn-rounded btn-grey" title="ENTER" data-i18n-key="dialogs.accept" data-i18n-attrs="text" autofocus disabled></button>
                     <button id="decline-request" class="btn btn-rounded btn-grey" title="ESCAPE" data-i18n-key="dialogs.decline" data-i18n-attrs="text"></button>
                 </div>
@@ -423,7 +425,7 @@
                     </div>
                 </div>
                 <div class="center file-preview"></div>
-                <div class="row-reverse center btn-row">
+                <div class="row-reverse center btn-row wrap">
                     <button id="share-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.share" data-i18n-attrs="text" hidden></button>
                     <button id="download-btn" class="btn btn-rounded btn-grey" data-i18n-key="dialogs.download" data-i18n-attrs="text" autofocus disabled></button>
                     <button class="btn btn-rounded btn-grey" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
@@ -452,7 +454,7 @@
                             <div class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div>
                         </div>
                     </div>
-                    <div class="btn-row row-reverse">
+                    <div class="btn-row row-reverse wrap">
                         <button class="btn btn-rounded btn-grey" type="submit" title="CTRL/⌘ + ENTER" data-i18n-key="dialogs.send" data-i18n-attrs="text" disabled></button>
                         <button class="btn btn-rounded btn-grey" type="button" title="ESCAPE" data-i18n-key="dialogs.cancel" data-i18n-attrs="text" close></button>
                     </div>
@@ -478,7 +480,7 @@
                         <div id="text" class="textarea"></div>
                     </div>
                 </div>
-                <div class="row-reverse center btn-row">
+                <div class="row-reverse center btn-row wrap">
                     <button id="copy" class="btn btn-rounded btn-grey" title="CTRL/⌘ + C" data-i18n-key="dialogs.copy" data-i18n-attrs="text"></button>
                     <button id="close" class="btn btn-rounded btn-grey" title="ESCAPE" data-i18n-key="dialogs.close" data-i18n-attrs="text"></button>
                 </div>
@@ -511,7 +513,7 @@
                         <div class="slider round"></div>
                     </label>
                 </div>
-                <div class="btn-row row-reverse">
+                <div class="btn-row row-reverse wrap">
                     <button class="btn btn-rounded btn-grey" type="submit" title="CTRL/⌘ + ENTER" data-i18n-key="dialogs.approve" data-i18n-attrs="text" autofocus disabled></button>
                 </div>
             </x-paper>
@@ -528,7 +530,7 @@
                     <button class="btn btn-rounded btn-grey center" id="base64-paste-btn" title="Paste"></button>
                     <div class="textarea" title="CMD/⌘ + V" contenteditable hidden></div>
                 </div>
-                <div class="row-reverse center btn-row">
+                <div class="row-reverse center btn-row wrap">
                     <button class="btn btn-rounded btn-grey" data-i18n-key="dialogs.close" data-i18n-attrs="text" close></button>
                 </div>
             </x-paper>
diff --git a/public/styles/deferred-styles.css b/public/styles/deferred-styles.css
index 97d483e..84e2180 100644
--- a/public/styles/deferred-styles.css
+++ b/public/styles/deferred-styles.css
@@ -388,6 +388,10 @@ x-dialog a {
 
 /* Pair Devices Dialog & Public Room Dialog */
 
+#public-room-dialog x-paper {
+    width: 450px;
+}
+
 .input-key-container {
     width: 100%;
     display: flex;
@@ -544,18 +548,14 @@ x-dialog hr {
 }
 
 /* button row*/
-.btn-row > .btn {
-    height: 100%;
-    width: 100%;
-}
-
-.btn-row > .btn {
-    margin-right: 5px;
-    margin-left: 5px;
+.btn-row .btn {
+    margin: 3px;
+    flex-grow: 1;
+    height: 50px;
+    width: 120px; /* fixed width needed to ensure same width for all buttons */
 }
 
 x-paper > .btn-row {
-    height: 50px;
     margin: 5px 10px 10px;
 }
 
@@ -638,10 +638,11 @@ x-dialog .dialog-subheader {
 }
 
 .share-panel {
+    min-width: 250px;
     max-width: calc(100vw - 20px);
     overflow: hidden;
-    background-color: var(--primary-color);
     color: white;
+    background-color: var(--primary-color);
     background-image: linear-gradient(225deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color) 60%, black) 100%);
 }
 
@@ -677,6 +678,10 @@ x-dialog .dialog-subheader {
     background-position: center;
 }
 
+.share-panel .btn {
+    height: 36px;
+}
+
 .share-descriptor {
     justify-content: center;
 }
diff --git a/public/styles/styles-main.css b/public/styles/styles-main.css
index 8f109c7..ae70041 100644
--- a/public/styles/styles-main.css
+++ b/public/styles/styles-main.css
@@ -48,16 +48,36 @@ html {
 }
 
 .m1 {
-    margin: 10px;
+    margin: 5px;
 }
 
 .cursive {
     font-style: italic;
 }
 
-.row-reverse {
+.wrap {
     display: flex;
-    flex-direction: row-reverse;
+    flex-wrap: wrap;
+}
+
+.wrap-reverse {
+    display: flex;
+    flex-wrap: wrap-reverse;
+}
+
+.grow {
+    display: flex;
+    flex-grow: 1;
+}
+
+.grow-2 {
+    display: flex;
+    flex-grow: 2;
+}
+
+.shrink {
+    display: flex;
+    flex-shrink: 1;
 }
 
 .flex {
@@ -81,6 +101,11 @@ html {
     flex-direction: row;
 }
 
+.row-reverse {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
 .column {
     display: flex;
     flex-direction: column;
@@ -92,10 +117,6 @@ html {
     justify-content: center;
 }
 
-.grow {
-    flex-grow: 1;
-}
-
 .full {
     position: absolute;
     top: 0;