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

@@ -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">

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",

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');
         }

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 {
+#send-text-dialog,
-    min-height: 200px;
+#receive-text-dialog {
-    width: 100%;
+    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;