Tidy chat drawer composer layout

apps/web/src/components/ChatDrawer.vue

@@ -160,17 +160,6 @@ async function scrollBottom(): Promise<void> {
     </div>
 
     <form class="composer" @submit.prevent="send">
-      <div class="composer-tools">
-        <button
-          type="button"
-          class="thin"
-          :disabled="!canSend"
-          @click="showStickers = !showStickers"
-        >
-          stickers
-        </button>
-        <span class="muted">{{ CHAT_STICKERS.length }} signed insults ready</span>
-      </div>
       <div v-if="showStickers" class="sticker-tray">
         <button
           v-for="sticker in CHAT_STICKERS"
@@ -182,6 +171,16 @@ async function scrollBottom(): Promise<void> {
           {{ sticker.label }}
         </button>
       </div>
+      <div class="composer-tools">
+        <button
+          type="button"
+          class="sticker-toggle"
+          :disabled="!canSend"
+          @click="showStickers = !showStickers"
+        >
+          stickers
+        </button>
+      </div>
       <textarea
         v-model="draft"
         :disabled="!canSend"
@@ -203,11 +202,11 @@ async function scrollBottom(): Promise<void> {
 }
 .chat-drawer {
   position: fixed;
-  top: 0;
+  top: 76px;
   right: 0;
   z-index: 20;
   width: min(430px, 92vw);
-  height: 100vh;
+  height: min(720px, calc(100dvh - 92px));
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   gap: 12px;
@@ -327,23 +326,17 @@ p.sticker {
 }
 .composer {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 64px;
+  grid-template-columns: 78px minmax(0, 1fr) 64px;
   gap: 8px;
   align-items: start;
+  padding-top: 10px;
+  border-top: 1px solid var(--line);
 }
-.composer-tools,
 .sticker-tray {
   grid-column: 1 / -1;
 }
 .composer-tools {
-  display: flex;
-  justify-content: space-between;
-  gap: 10px;
-  align-items: center;
-}
-.composer-tools span {
-  font-size: 10px;
-  text-align: right;
+  min-width: 0;
 }
 .sticker-tray {
   display: grid;
@@ -363,6 +356,14 @@ p.sticker {
   font-size: 10px;
   overflow-wrap: anywhere;
 }
+.sticker-toggle {
+  width: 100%;
+  height: 58px;
+  padding: 0 6px;
+  color: var(--neon-amber);
+  border-color: var(--line-bright);
+  font-size: 10px;
+}
 textarea {
   height: 58px;
   min-height: 58px;
@@ -383,8 +384,9 @@ textarea {
     top: auto;
     bottom: 0;
     width: 100vw;
-    height: 55vh;
-    padding: 14px;
+    height: min(72dvh, 560px);
+    max-height: calc(100dvh - 118px);
+    padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
     transform: translateY(105%);
     border-left: 0;
     border-top: 1px solid var(--line-bright);
@@ -393,7 +395,11 @@ textarea {
     transform: translateY(0);
   }
   .composer {
-    grid-template-columns: minmax(0, 1fr) 58px;
+    grid-template-columns: 72px minmax(0, 1fr) 58px;
+    gap: 6px;
+  }
+  .sticker-tray {
+    max-height: 108px;
   }
 }
 </style>