use a flex column-reverse outside a column

thanks mary again :3

client/main.tsx

@@ -71,9 +71,6 @@ 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;
@@ -106,8 +103,6 @@ function conversationUI(id: string) {
         inFlightMessages.delete(message.r);
       }
     }
-
-    if (scrolledToBottom) chatlog.scrollTop = chatlog.scrollHeight - chatlog.clientHeight;
   });
 
   const form = (
@@ -126,7 +121,7 @@ function conversationUI(id: string) {
   return (
     <section className="conversation">
       {header}
-      {chatlog}
+      <section className="chatlog-wrapper">{chatlog}</section>
       {form}
     </section>
   );

client/response.tsx

@@ -77,11 +77,6 @@ export class ChatResponse {
         this.currentLine.appendData(token);
       }
     }
-
-    if (this.thinkingContext) {
-      this.thinkingContext.scrollTop =
-        this.thinkingContext.scrollHeight - this.thinkingContext.clientHeight;
-    }
   }
 
   finalize() {

client/web/css/styles.css

@@ -66,12 +66,18 @@ main,
   }
 }
 
-.chatlog {
+.chatlog-wrapper {
   flex: 1;
 
   display: flex;
-  flex-direction: column;
+  flex-direction: column-reverse;
   overflow-y: scroll;
+}
+
+.chatlog {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 
   article {
     white-space: preserve;
@@ -109,11 +115,6 @@ main,
       font-size: 1rem;
     }
   }
-
-  details[data-in-progress] {
-    max-height: 4em;
-    overflow-y: auto;
-  }
 }
 
 pre > code {