From 3b134c8fefe1ac3e2a91b315128680289af50893 Mon Sep 17 00:00:00 2001
From: Peter Steinberger <steipete@gmail.com>
Date: Mon, 22 Dec 2025 19:01:58 +0100
Subject: [PATCH] style: tighten chat compose spacing

---
 ui/src/styles/components.css | 32 ++++++++++++++++++++++++++++++++
 ui/src/ui/views/chat.ts      |  8 ++++----
 2 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/ui/src/styles/components.css b/ui/src/styles/components.css
index b4f36044b..3a5a09999 100644
--- a/ui/src/styles/components.css
+++ b/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;
diff --git a/ui/src/ui/views/chat.ts b/ui/src/ui/views/chat.ts
index bbf386d9d..6e952d8f6 100644
--- a/ui/src/ui/views/chat.ts
+++ b/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;">
-        <label class="field">
+      <div class="compose chat-compose">
+        <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}