From 91f6efe7360b3bbe36dfca86ff3de0543fc9eb90 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Sun, 12 Nov 2023 10:57:22 +0800
Subject: [PATCH] Adjustments for the compose field

---
 src/components/compose.css | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

diff --git a/src/components/compose.css b/src/components/compose.css
index 5ae798cb..57b7948d 100644
--- a/src/components/compose.css
+++ b/src/components/compose.css
@@ -137,14 +137,6 @@
   border-color: transparent;
 
   &.compose-field {
-    @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;
     }
@@ -623,6 +615,17 @@
 .compose-field-container {
   display: grid !important;
 
+  @media (width < 30em) {
+    margin-inline: calc(-1 * var(--form-padding-inline));
+    width: 100vw !important;
+    max-width: 100vw;
+
+    .compose-field {
+      border-radius: 0;
+      outline-offset: -2px;
+    }
+  }
+
   &.debug {
     grid-template-columns: 1fr 1fr;
   }
@@ -654,12 +657,6 @@
     @media (min-width: 40em) {
       max-height: 65vh;
     }
-    @media (width < 30em) {
-      margin-inline: calc(-1 * var(--form-padding-inline));
-      width: 100vw !important;
-      max-width: 100vw;
-      border: 0;
-    }
 
     mark {
       color: inherit;