From 2395c647d45769fe8c440d75219fb838a74869e3 Mon Sep 17 00:00:00 2001
From: oobabooga <112222186+oobabooga@users.noreply.github.com>
Date: Tue, 2 Sep 2025 12:11:15 -0700
Subject: [PATCH] Fix the instruct message height on mobile

---
 js/main.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/js/main.js b/js/main.js
index c08dffcf..c31621f6 100644
--- a/js/main.js
+++ b/js/main.js
@@ -206,7 +206,13 @@ const observer = new MutationObserver(function(mutations) {
       // Add padding to the messages container to create room for the last message.
       // The purpose of this is to avoid constant scrolling during streaming in
       // instruct mode.
-      const bufferHeight = Math.max(0, Math.max(window.innerHeight - 128 - 84, window.innerHeight - prevSibling.offsetHeight - 84) - lastChild.offsetHeight);
+      let bufferHeight = Math.max(0, Math.max(window.innerHeight - 128 - 84, window.innerHeight - prevSibling.offsetHeight - 84) - lastChild.offsetHeight);
+
+      // Subtract header height when screen width is <= 924px
+      if (window.innerWidth <= 924) {
+        bufferHeight = Math.max(0, bufferHeight - 32);
+      }
+
       messagesContainer.style.paddingBottom = `${bufferHeight}px`;
     }
   }