From 95bca64731c4b105f32a676a0d30a45de6393903 Mon Sep 17 00:00:00 2001
From: Charlotte Som <charlotte@som.codes>
Date: Fri, 28 Feb 2025 16:21:44 +0000
Subject: [PATCH] Revert "use a flex column-reverse outside a column"

fixes firefox autoscroll
---
 client/main.tsx           |  7 ++++++-
 client/response.tsx       |  5 +++++
 client/web/css/styles.css | 10 ++--------
 3 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/client/main.tsx b/client/main.tsx
index b8239bd..5639b3c 100644
--- a/client/main.tsx
+++ b/client/main.tsx
@@ -71,6 +71,9 @@ function conversationUI(id: string) {
     if (typeof event.data !== "string") return;
     const message = JSON.parse(event.data);
 
+    const scrolledToBottom =
+      chatlog.scrollTop + 16 >= chatlog.scrollHeight - chatlog.clientHeight;
+
     if ("i" in message) {
       window.history.replaceState(null, "", "#" + message.i);
       id = message.i;
@@ -103,6 +106,8 @@ function conversationUI(id: string) {
         inFlightMessages.delete(message.r);
       }
     }
+
+    if (scrolledToBottom) chatlog.scrollTop = chatlog.scrollHeight - chatlog.clientHeight;
   });
 
   const form = (
@@ -121,7 +126,7 @@ function conversationUI(id: string) {
   return (
     <section className="conversation">
       {header}
-      <section className="chatlog-wrapper">{chatlog}</section>
+      {chatlog}
       {form}
     </section>
   );
diff --git a/client/response.tsx b/client/response.tsx
index f0733e2..e6ba06a 100644
--- a/client/response.tsx
+++ b/client/response.tsx
@@ -77,6 +77,11 @@ export class ChatResponse {
         this.currentLine.appendData(token);
       }
     }
+
+    if (this.thinkingContext) {
+      this.thinkingContext.scrollTop =
+        this.thinkingContext.scrollHeight - this.thinkingContext.clientHeight;
+    }
   }
 
   finalize() {
diff --git a/client/web/css/styles.css b/client/web/css/styles.css
index 1ecbe04..c8faec3 100644
--- a/client/web/css/styles.css
+++ b/client/web/css/styles.css
@@ -66,18 +66,12 @@ main,
   }
 }
 
-.chatlog-wrapper {
-  flex: 1;
-
-  display: flex;
-  flex-direction: column-reverse;
-  overflow-y: scroll;
-}
-
 .chatlog {
   flex: 1;
+
   display: flex;
   flex-direction: column;
+  overflow-y: scroll;
 
   article {
     white-space: preserve;