style: tighten chat compose spacing

ui/src/styles/components.css

@@ -304,6 +304,11 @@
   background: rgba(0, 0, 0, 0.2);
 }
 
+.chat-messages {
+  margin-top: 8px;
+  padding: 6px;
+}
+
 .msg {
   border: 1px solid var(--border);
   background: rgba(0, 0, 0, 0.2);
@@ -341,6 +346,33 @@
   gap: 10px;
 }
 
+.chat-compose {
+  margin-top: 8px;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: end;
+  gap: 8px;
+}
+
+.chat-compose__field {
+  gap: 4px;
+}
+
+.chat-compose__field textarea {
+  min-height: 120px;
+  padding: 8px 10px;
+}
+
+.chat-compose__actions {
+  justify-content: flex-end;
+  align-self: end;
+}
+
+@media (max-width: 900px) {
+  .chat-compose {
+    grid-template-columns: 1fr;
+  }
+}
+
 .qr-wrap {
   margin-top: 12px;
   border-radius: 14px;

ui/src/ui/views/chat.ts

@@ -37,7 +37,7 @@ export function renderChat(props: ChatProps) {
         </div>
       </div>
 
-      <div class="messages" style="margin-top: 12px;">
+      <div class="messages chat-messages">
         ${props.loading ? html`<div class="muted">Loading chat…</div>` : nothing}
         ${props.messages.map((m) => renderMessage(m))}
         ${props.stream
@@ -48,8 +48,8 @@ export function renderChat(props: ChatProps) {
           : nothing}
       </div>
 
-      <div class="compose" style="margin-top: 12px;">
+      <div class="compose chat-compose">
-        <label class="field">
+        <label class="field chat-compose__field">
           <span>Message</span>
           <textarea
             .value=${props.draft}
@@ -58,7 +58,7 @@ export function renderChat(props: ChatProps) {
             placeholder="Ask the model…"
           ></textarea>
         </label>
-        <div class="row" style="justify-content: flex-end;">
+        <div class="row chat-compose__actions">
           <button
             class="btn primary"
             ?disabled=${props.sending || !props.connected}