From daa754bac4176ff5dfe474cdb1c5529d8b0436d6 Mon Sep 17 00:00:00 2001
From: fretuks <frederik@spirgi.com>
Date: Sun, 20 Sep 2026 20:47:35 +0200
Subject: [PATCH] update input container layout with grid areas for improved
 semantic structure and maintainability

---
 public/chat.html | 2 +-
 public/style.css | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/chat.html b/public/chat.html
index 6bca520..bdd3e5f 100644
--- a/public/chat.html
+++ b/public/chat.html
@@ -8,7 +8,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <script src="/app/theme-bootstrap.js?v=20260909-account-controls"></script>
-    <link rel="stylesheet" href="/style.css?v=20260909-account-controls"/>
+    <link rel="stylesheet" href="/style.css?v=20260920-web-search-composer"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="stylesheet" href="/pages.css?v=20260909-account-controls"><link rel="stylesheet" href="/shell.css?v=20260909-account-controls">
 </head>
diff --git a/public/style.css b/public/style.css
index c757013..243dad4 100644
--- a/public/style.css
+++ b/public/style.css
@@ -436,16 +436,16 @@ input:focus, textarea:focus, select:focus { border-color: var(--brand); }
 .input-meta, .input-container { width: min(940px, 100%); margin-inline: auto; }
 .input-meta { margin-bottom: 5px; padding-left: 10px; }
 .composer-hint { margin: 0; color: var(--text-muted); font-size: .72rem; }
-.input-container { padding: 7px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 7px; align-items: end; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 24px; box-shadow: var(--shadow-sm); }
-#webSearch { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 17px; }
+.input-container { padding: 7px; display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; grid-template-areas: "search message send"; gap: 7px; align-items: end; background: var(--input-bg); border: 1px solid var(--border-strong); border-radius: 24px; box-shadow: var(--shadow-sm); }
+#webSearch { grid-area: search; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 17px; }
 #webSearch[aria-pressed="true"] { color: var(--brand-strong); background: var(--brand-soft); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
 .msg-sources { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); min-width: 0; font-size: .8rem; }
 .msg-sources-heading { color: var(--text-muted); margin-bottom: 6px; }
 .msg-source { display: flex; min-width: 0; flex-direction: column; gap: 2px; margin-top: 6px; }
 .msg-source span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .msg-source small { color: var(--text-muted); }
-#msgInput { min-height: 44px; max-height: 160px; padding: 11px 13px; resize: none; background: transparent; border: 0; box-shadow: none; }
-#send { width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border-radius: 17px; }
+#msgInput { grid-area: message; min-height: 44px; max-height: 160px; padding: 11px 13px; resize: none; background: transparent; border: 0; box-shadow: none; }
+#send { grid-area: send; width: 44px; min-width: 44px; height: 44px; min-height: 44px; padding: 0; display: grid; place-items: center; border-radius: 17px; }
 #send::after { content: "\2191"; font-size: 1.1rem; font-weight: 800; }
 #send.loading::after { content: "■"; font-size: .85rem; }
 .generation-settings-grid { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }