Auto-scroll checkbox

web/static/css/chat.css

@@ -64,6 +64,15 @@ body {
     grid-column: 2;
     grid-row: 2;
     overflow: hidden;
+    position: relative;
+}
+
+/* Auto-scroll checkbox in the corner */
+.chat-column >.autoscroll-field {
+    position: absolute;
+    z-index: 39; /* just below modal shadow */
+    right: 6px;
+    bottom: 4px;
 }
 
 /* Footer row: message entry box */

web/static/js/BareRTC.js

@@ -120,6 +120,7 @@ const app = Vue.createApp({
                 // }
             },
             historyScrollbox: null,
+            autoscroll: true, // scroll to bottom on new messages
             DMs: {},
 
             // Responsive CSS controls for mobile.
@@ -1083,6 +1084,8 @@ const app = Vue.createApp({
         },
 
         scrollHistory() {
+            if (!this.autoscroll) return;
+
             window.requestAnimationFrame(() => {
                 this.historyScrollbox.scroll({
                     top: this.historyScrollbox.scrollHeight,

web/templates/chat.html

@@ -425,6 +425,15 @@
 
         <!-- Middle Column: Chat Room/History -->
         <div class="chat-column">
+            <div class="autoscroll-field tag">
+                <label class="checkbox is-size-6" title="Automatically scroll when new chat messages come in.">
+                    <input type="checkbox"
+                        v-model="autoscroll"
+                        :value="true">
+                    Auto-scroll
+                </label>
+            </div>
+
             <div class="card grid-card">
                 <header class="card-header has-background-link">
                     <div class="columns is-mobile card-header-title has-text-light">