From 44ffd69941cd8942f9e20c2759129db0ac4cc8ea Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sat, 4 Nov 2023 11:46:32 +0800
Subject: [PATCH] Make textarea wider for small viewport

---
 src/components/compose.css | 58 ++++++++++++++++++++++----------------
 1 file changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/components/compose.css b/src/components/compose.css
index edadbe1..ef6356c 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -40,28 +40,6 @@
   border-radius: 9999px;
 }
 
-#compose-container textarea {
-  width: 100%;
-  max-width: 100%;
-  height: 5em;
-  min-height: 5em;
-  max-height: 50vh;
-  resize: vertical;
-  line-height: 1.4;
-  border-color: transparent;
-}
-#compose-container textarea:hover {
-  border-color: var(--divider-color);
-}
-
-@media (min-width: 40em) {
-  #compose-container textarea {
-    /* font-size: 150%;
-    font-size: calc(100% + 50% / var(--text-weight)); */
-    max-height: 65vh;
-  }
-}
-
 @keyframes appear-up {
   0% {
     opacity: 0;
@@ -129,19 +107,51 @@
 }
 
 #compose-container form {
-  border-radius: 16px;
-  padding: 4px 12px;
+  --form-padding-inline: 12px;
+  --form-padding-block: 8px;
+  /* border-radius: 16px; */
+  padding: var(--form-padding-block) var(--form-padding-inline);
   background-color: var(--bg-blur-color);
   /* background-image: linear-gradient(var(--bg-color) 85%, transparent); */
   position: relative;
   z-index: 2;
   --drop-shadow: 0 3px 6px -3px var(--drop-shadow-color);
   box-shadow: var(--drop-shadow);
+
+  @media (min-width: 40em) {
+    border-radius: 16px;
+  }
 }
 #compose-container .status-preview ~ form {
   box-shadow: var(--drop-shadow), 0 -3px 6px -3px var(--drop-shadow-color);
 }
 
+#compose-container textarea {
+  width: 100%;
+  max-width: 100%;
+  height: 5em;
+  min-height: 5em;
+  max-height: 50vh;
+  resize: vertical;
+  line-height: 1.4;
+  border-color: transparent;
+
+  @media (width < 30em) {
+    margin-inline: calc(-1 * var(--form-padding-inline));
+    width: 100vw !important;
+    max-width: 100vw;
+    border-radius: 0;
+    border: 0;
+  }
+
+  @media (min-width: 40em) {
+    max-height: 65vh;
+  }
+}
+#compose-container textarea:hover {
+  border-color: var(--divider-color);
+}
+
 #compose-container .toolbar {
   display: flex;
   justify-content: space-between;