From d352047a8d4e7b903b020c122476f72282cb82ec Mon Sep 17 00:00:00 2001
From: Laura <milanbartky@gmail.com>
Date: Mon, 11 Aug 2025 01:45:40 +0200
Subject: [PATCH] fix reasoning height

---
 static/css/chat.css | 14 ++++++++------
 static/js/chat.js   | 21 ++++++++++++++++-----
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/static/css/chat.css b/static/css/chat.css
index 36426f2..4877bfb 100644
--- a/static/css/chat.css
+++ b/static/css/chat.css
@@ -259,18 +259,20 @@ body.loading #version {
 }
 
 .message .reasoning-text {
-	--height: auto;
-	height: calc(var(--height) + 20px);
 	background: #1e2030;
 	border-radius: 6px;
-	transition: 150ms;
 	padding: 10px 12px;
 }
 
-.message:not(.expanded) .reasoning-text {
-	height: 0;
-	padding: 0 12px;
+.message .reasoning-wrapper {
+	--height: auto;
+	height: calc(var(--height) + 20px);
 	overflow: hidden;
+	transition: 150ms;
+}
+
+.message:not(.expanded) .reasoning-wrapper {
+	height: 0;
 }
 
 .message.expanded .reasoning-text {
diff --git a/static/js/chat.js b/static/js/chat.js
index 5e91c5b..dbd7b0c 100644
--- a/static/js/chat.js
+++ b/static/js/chat.js
@@ -116,16 +116,23 @@
 				this.#expanded = !this.#expanded;
 
 				if (this.#expanded) {
+					this.#updateReasoningHeight();
+
 					this.#_message.classList.add("expanded");
 				} else {
 					this.#_message.classList.remove("expanded");
 				}
 			});
 
+			// message reasoning (height wrapper)
+			const _height = make("div", "reasoning-wrapper");
+
+			_reasoning.appendChild(_height);
+
 			// message reasoning (content)
 			this.#_reasoning = make("div", "reasoning-text", "markdown");
 
-			_reasoning.appendChild(this.#_reasoning);
+			_height.appendChild(this.#_reasoning);
 
 			// message content
 			this.#_text = make("div", "text", "markdown");
@@ -211,6 +218,13 @@
 			});
 		}
 
+		#updateReasoningHeight() {
+			this.#_reasoning.parentNode.style.setProperty(
+				"--height",
+				`${this.#_reasoning.scrollHeight}px`,
+			);
+		}
+
 		#patch(name, element, md, after = false) {
 			if (!element.firstChild) {
 				element.innerHTML = render(md);
@@ -267,10 +281,7 @@
 
 			if (!only || only === "reasoning") {
 				this.#patch("reasoning", this.#_reasoning, this.#reasoning, () => {
-					this.#_reasoning.style.setProperty(
-						"--height",
-						`${this.#_reasoning.scrollHeight}px`,
-					);
+					this.#updateReasoningHeight();
 
 					noScroll || scroll();
 				});