From f53832ead13c103bb87d926bab0d065d52c40fdf Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Mon, 20 Nov 2023 05:27:22 +0100
Subject: [PATCH] Increase text input font size to 16px to prevent automatic
 zooming on iOS devices; Remove spellcheck and autocapitalize prevention and
 change receive text style

---
 public/index.html    |  4 ++--
 public/lang/en.json  |  1 +
 public/scripts/ui.js |  4 +++-
 public/styles.css    | 26 +++++++++++++++-----------
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/public/index.html b/public/index.html
index 9f6504b..6511112 100644
--- a/public/index.html
+++ b/public/index.html
@@ -418,7 +418,7 @@
                     </div>
                     <div class="row">
                         <div class="column fw">
-                            <div id="text-input" class="textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
+                            <div id="text-input" class="fw textarea" role="textbox" data-i18n-key="dialogs.message" data-i18n-attrs="title placeholder" autofocus contenteditable></div>
                         </div>
                     </div>
                     <div class="button-row row-reverse">
@@ -444,7 +444,7 @@
                 </div>
                 <div class="row center">
                     <div class="column fw">
-                        <div id="text" class="textarea fw"></div>
+                        <div id="text" class="fw"></div>
                     </div>
                 </div>
                 <div class="row-reverse center button-row">
diff --git a/public/lang/en.json b/public/lang/en.json
index 1b19c2f..3315a89 100644
--- a/public/lang/en.json
+++ b/public/lang/en.json
@@ -71,6 +71,7 @@
         "send-message-title": "Send Message",
         "send-message-to": "Send a Message to",
         "message_title": "Insert message to send",
+        "message_placeholder": "Message",
         "send": "Send",
         "receive-text-title": "Message Received",
         "copy": "Copy",
diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index 089d687..932d9de 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -434,7 +434,7 @@ class PeerUI {
                     <div class="name font-subheading"></div>
                     <div class="device-name font-body2"></div>
                     <div class="status font-body2"></div>
-                    <span class="connection-hash font-body2" dir="ltr" title="${ Localization.getTranslation("peer-ui.connection-hash") }"></span>
+                    <div class="connection-hash font-body2" dir="ltr" title="${ Localization.getTranslation("peer-ui.connection-hash") }"></div>
                 </div>
             </label>`;
 
@@ -1796,6 +1796,8 @@ class SendTextDialog extends Dialog {
     _onChange(e) {
         if (this._textInputEmpty()) {
             this.$submit.setAttribute('disabled', '');
+            // remove remaining whitespace on Firefox on text deletion
+            this.$text.innerText = "";
         } else {
             this.$submit.removeAttribute('disabled');
         }
diff --git a/public/styles.css b/public/styles.css
index 4d5fadb..cfed5db 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -558,12 +558,10 @@ x-peer[status] x-icon {
 }
 
 .device-name {
-    font-size: 14px;
     white-space: nowrap;
 }
 
 .connection-hash {
-    font-size: 12px;
     white-space: nowrap;
 }
 
@@ -615,7 +613,7 @@ footer .logo {
 }
 
 .discovery-wrapper {
-    font-size: 12px;
+    font-size: 14px;
     margin: 10px auto auto;
     border: 3px solid var(--border-color);
     border-radius: 0.5rem;
@@ -662,6 +660,10 @@ footer .logo {
     border-color: var(--public-room-color);
 }
 
+.known-as-wrapper {
+    font-size: 16px; /* prevents auto-zoom on edit */
+}
+
 #display-name {
     position: relative;
     display: inline-block;
@@ -1036,23 +1038,25 @@ x-dialog .dialog-subheader {
     padding-bottom: 0;
 }
 
-#text-input {
-    min-height: 200px;
-    width: 100%;
+#send-text-dialog,
+#receive-text-dialog {
+    font-size: 16px;  /* prevents auto-zoom on edit */
+}
+
+#text-input:before {
+    opacity: 0.5;
 }
 
 /* Receive Text Dialog */
 
 #receive-text-dialog #text {
-    width: 100%;
     word-break: break-all;
-    max-height: calc(100vh - 393px);
+    max-height: 400px;
     overflow-x: hidden;
-    overflow-y: auto;
+    overflow-y: scroll;
     -webkit-user-select: text;
     -moz-user-select: text;
     user-select: text;
-    white-space: pre-wrap;
 }
 
 #receive-text-dialog #text a {
@@ -1202,7 +1206,7 @@ button::-moz-focus-inner {
     outline: none;
     padding: 16px 24px;
     border-radius: 8px;
-    font-size: 14px;
+    font-size: inherit;
     font-family: inherit;
     background: #f1f3f4;
     display: block;