Don't scroll all the time as messages are added

Only once on load, then once per new message.

2 files changed, 7 insertions, 5 deletions

diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index f7837aa..30b8385 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -2,6 +2,12 @@
   import MessageRun from './MessageRun.svelte';
 
   let { messageRuns, deleteMessage = async (id) => {} } = $props();
+
+  $effect(() => {
+    // This is just to force it to track messageRuns.
+    const _ = messageRuns;
+    document.querySelector('.message-run:last-child .message:last-child').scrollIntoView();
+  });
 </script>
 
 {#each messageRuns as { sender, ownMessage, messages }}
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index dacd900..edd9d79 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -1,10 +1,6 @@
 <script>
   import { DateTime } from 'luxon';
 
-  function scroll(message) {
-    message.scrollIntoView();
-  }
-
   let { id, at, body, renderedBody, editable = false, deleteMessage = async (id) => {} } = $props();
   let deleteArmed = $state(false);
   let atFormatted = $derived(at.toLocaleString(DateTime.DATETIME_SHORT));
@@ -31,7 +27,7 @@
       <button onclick={ondelete}>&#x1F5D1;&#xFE0F;</button>
     {/if}
   </div>
-  <section use:scroll class="message-body">
+  <section class="message-body">
     <!-- eslint-disable-next-line svelte/no-at-html-tags -->
     {@html renderedBody}
   </section>