From 05d4dc997c3d09682d7cb275b1842867f7c289a2 Mon Sep 17 00:00:00 2001
From: Alexander Payne <apayne@MM.local>
Date: Thu, 26 Feb 2026 09:15:40 -0500
Subject: [PATCH] =?UTF-8?q?fix:=20chat=20panel=20scroll=20=E2=80=94=20inte?=
 =?UTF-8?q?rnal=20scroll=20on=20#chat-log,=20auto-scroll=20on=20new=20mess?=
 =?UTF-8?q?ages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Set overflow:hidden on mc-main to prevent page-level scrolling
- Add max-height:100% to sidebar and chat panel to contain within viewport
- Use flex-wrap:nowrap on layout row to prevent column stacking on desktop
- Move scrollChat() to hx-on::after-settle for reliable post-swap scrolling
- Use requestAnimationFrame for smooth scroll-to-bottom timing

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../templates/partials/timmy_panel.html         | 17 +++++++++++------
 static/style.css                                |  5 ++++-
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/dashboard/templates/partials/timmy_panel.html b/src/dashboard/templates/partials/timmy_panel.html
index 7c3a0abd..663a9977 100644
--- a/src/dashboard/templates/partials/timmy_panel.html
+++ b/src/dashboard/templates/partials/timmy_panel.html
@@ -2,9 +2,9 @@
   <div class="card mc-panel flex-grow-1 d-flex flex-column min-h-0">
 
     <div class="card-header mc-panel-header d-flex justify-content-between align-items-center">
-      <span>
+      <span class="d-flex align-items-center gap-2">
         {% if agent %}
-          <span class="status-dot {{ 'green' if agent.status == 'idle' else 'amber' }}" style="margin-right:6px;"></span>
+          <span class="status-dot {{ 'green' if agent.status == 'idle' else 'amber' }}"></span>
         {% endif %}
         // TIMMY INTERFACE
       </span>
@@ -28,7 +28,8 @@
             hx-indicator="#send-indicator"
             hx-sync="this:drop"
             hx-disabled-elt="find button"
-            hx-on::after-request="if(event.detail.successful){this.querySelector('[name=message]').value=''; scrollChat()}"
+            hx-on::after-settle="scrollChat()"
+            hx-on::after-request="if(event.detail.successful){this.querySelector('[name=message]').value='';}"
             class="d-flex gap-2">
         <input type="text"
                name="message"
@@ -42,7 +43,7 @@
                required />
         <button type="submit" class="btn mc-btn-send">
           SEND
-          <span id="send-indicator" class="htmx-indicator">▋</span>
+          <span id="send-indicator" class="htmx-indicator">&#x25FC;</span>
         </button>
       </form>
     </div>
@@ -52,8 +53,12 @@
 
 <script>
   function scrollChat() {
-    const log = document.getElementById('chat-log');
-    if (log) log.scrollTop = log.scrollHeight;
+    var log = document.getElementById('chat-log');
+    if (log) {
+      requestAnimationFrame(function() {
+        log.scrollTop = log.scrollHeight;
+      });
+    }
   }
   scrollChat();
 </script>
diff --git a/static/style.css b/static/style.css
index fad69562..4549352f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -251,24 +251,27 @@ a:hover { color: var(--orange); }
 .mc-main {
   padding: 16px;
   height: calc(100dvh - var(--header-h));
-  overflow: clip;
+  overflow: hidden;
 }
 .mc-content {
   height: 100%;
 }
 .mc-content > .row {
   height: 100%;
+  flex-wrap: nowrap;
 }
 
 /* ── Sidebar ─────────────────────────────────────── */
 .mc-sidebar {
   overflow-y: auto;
   min-height: 0;
+  max-height: 100%;
 }
 
 /* ── Chat column ─────────────────────────────────── */
 .mc-chat-panel {
   min-height: 0;
+  max-height: 100%;
 }
 .mc-chat-panel > .card {
   height: 100%;