diff options
| -rw-r--r-- | ui/lib/components/ActiveChannel.svelte | 6 | ||||
| -rw-r--r-- | ui/lib/components/Message.svelte | 6 |
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}>🗑️</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> |