fix reasoning height

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 {

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();
 				});