styling for contact freetext

src/web/contact.rs

@@ -261,7 +261,11 @@ mod get {
                     input type="button" value="Add" x-on:click="addresses.push({ label: new_label, value: new_address }); new_label = ''; new_address = ''";
                 }
             }
-            textarea name="text_body" { (text_body) }
+            .grow-wrap data-replicated-value=(text_body) {
+                textarea name="text_body"
+                onInput="this.parentNode.dataset.replicatedValue = this.value"
+                { (text_body) }
+            }
         }
     }))
     }

static/contact.css

@@ -39,6 +39,47 @@ main {
   }
 }
 
+#text_body {
+  margin-top: 1em;
+
+  p+p {
+    margin-top: 0.5em;
+  }
+
+  em {
+    font-style: italic;
+  }
+
+  strong {
+    font-weight: bold;
+  }
+}
+
+.grow-wrap {
+  display: grid;
+
+  &::after {
+    content: attr(data-replicated-value) " ";
+    white-space: pre-wrap;
+    visibility: hidden;
+  }
+
+  &>textarea {
+    resize: none;
+    overflow: hidden;
+  }
+
+  &>textarea,
+  &::after {
+    /* Identical styling required!! */
+    margin-top: 1em;
+    width: 100%;
+
+    /* Place on top of each other */
+    grid-area: 1 / 1 / 2 / 2;
+  }
+}
+
 .hint {
   font-size: small;
 }