From 9f0b5b00f7ada4c5735230d0f93e04a3c58d4d7a Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Sun, 11 May 2025 21:56:33 -0400
Subject: Fix up input to be a contenteditable div

---
 ui/styles/textarea.css | 34 +++++++++++++++++++++++++---------
 1 file changed, 25 insertions(+), 9 deletions(-)

(limited to 'ui/styles/textarea.css')

diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
index 4b8602c..4dc804a 100644
--- a/ui/styles/textarea.css
+++ b/ui/styles/textarea.css
@@ -4,28 +4,44 @@
   flex-direction: row;
   justify-content: flex-start;
   align-items: stretch;
+}
 
-  @media (width <= 640px) {
-    margin: 0 0.5rem 1rem 0.5rem;
-  }
+/* The second selector is more generally useful, but it doesn't seem to work,
+ * so I added in the first selector. */
+.textarea:empty:before,
+[contenteditable='true']:empty:before {
+  content: attr(placeholder);
+  pointer-events: none;
+  display: block; /* For Firefox */
 }
 
-.create-message textarea {
-  padding: 0.5rem;
-  border-radius: 0.5rem 0 0 0.5rem;
+.create-message .textarea {
+  padding: 1rem;
   border: 1px solid var(--colour-input-border);
   z-index: 1; /* Just to make the focus-active border go over the following button. */
   flex-grow: 1;
   background-color: var(--colour-input-bg);
   color: var(--colour-input-text);
-  font-family: 'FiraCode', monospace;
+  min-height: 1rem;
+  max-height: 10rem;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  @media (width <= 640px) {
+    border-radius: 0;
+    min-height: 2.5rem;
+  }
 }
 
 .create-message button {
-  border-radius: 0 0.5rem 0.5rem 0;
   border: 1px solid var(--colour-input-border);
   background-color: var(--colour-input-bg);
   color: var(--colour-input-text);
+  padding: 1rem;
+
+  @media (width <= 640px) {
+    border-radius: 0;
+  }
 }
 
 main {
@@ -38,7 +54,7 @@ main {
 /* Workaround for iOS zooming in on the textarea when it gets focus. */
 @media screen and (-webkit-min-device-pixel-ratio: 0) {
   select,
-  textarea,
+  .textarea,
   input {
     font-size: 16px;
   }
-- 
cgit v1.2.3


From a4ad808eb804e32edf3b848c229542b759db0102 Mon Sep 17 00:00:00 2001
From: Owen Jacobson <owen@grimoire.ca>
Date: Thu, 15 May 2025 20:46:49 -0400
Subject: Move placeholder-related CSS into `textarea.css`.

---
 ui/styles/forms.css    | 5 -----
 ui/styles/textarea.css | 8 +++-----
 2 files changed, 3 insertions(+), 10 deletions(-)

(limited to 'ui/styles/textarea.css')

diff --git a/ui/styles/forms.css b/ui/styles/forms.css
index a8789b1..98fd43e 100644
--- a/ui/styles/forms.css
+++ b/ui/styles/forms.css
@@ -23,11 +23,6 @@ form.form > button {
   margin: 0.25rem;
 }
 
-[data-placeholder]:empty:before {
-  content: attr(data-placeholder);
-  color: var(--light-text);
-}
-
 .disabled {
   color: var(--light-text);
 }
diff --git a/ui/styles/textarea.css b/ui/styles/textarea.css
index 4dc804a..d315bcf 100644
--- a/ui/styles/textarea.css
+++ b/ui/styles/textarea.css
@@ -6,11 +6,9 @@
   align-items: stretch;
 }
 
-/* The second selector is more generally useful, but it doesn't seem to work,
- * so I added in the first selector. */
-.textarea:empty:before,
-[contenteditable='true']:empty:before {
-  content: attr(placeholder);
+[data-placeholder]:empty:before {
+  content: attr(data-placeholder);
+  color: var(--light-text);
   pointer-events: none;
   display: block; /* For Firefox */
 }
-- 
cgit v1.2.3