Fix scrolling new messages into view, and layout of the bottom edge of message runs.

3 files changed, 12 insertions, 14 deletions

diff --git a/ui/lib/components/ActiveChannel.svelte b/ui/lib/components/ActiveChannel.svelte
index 1b23bc1..455043b 100644
--- a/ui/lib/components/ActiveChannel.svelte
+++ b/ui/lib/components/ActiveChannel.svelte
@@ -1,6 +1,5 @@
 <script>
     import { messages } from '$lib/store';
-    import Message from './Message.svelte';
     import MessageRun from './MessageRun.svelte';
 
     export let channel = null;
@@ -26,19 +25,11 @@
             yield [key, chunk];
         }
     }
-
-
-    let container;
-    // TODO: eventually, store scroll height/last unread in channel? scroll there?
-
-    let scroll = (message) => {
-        message.scrollIntoView();
-    }
 </script>
 
-<div class="container" bind:this={container}>
+<div class="container">
     {#each chunkBy(messageList, msg => msg.sender) as [sender, messages]}
-        <div use:scroll>
+        <div>
             <MessageRun {sender} {messages} />
         </div>
     {/each}
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index 004a484..75e4cc9 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -3,11 +3,15 @@
 
     export let at;
     export let body;
+
+    let scroll = (message) => {
+        message.scrollIntoView();
+    }
 </script>
 
 <div class="message relative">
     <span class="timestamp chip variant-soft absolute top-0 right-0">{at}</span>
-    <section class="mx-4 my-1">
+    <section use:scroll class="py-1">
         <SvelteMarkdown source={body} />
     </section>
 </div>
diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index b998a8b..687eec3 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -7,11 +7,14 @@
 
 	let name;
 	$: name = $logins.get(sender);
+
+	let scroll = (message) => {
+		message.scrollIntoView();
+	}
 </script>
 
-<div class="card card-hover m-4 relative">
+<div class="card card-hover m-4 px-4 py-1 relative">
 	<span class="chip variant-soft sticky top-o left-0">
-		<!-- TODO: should this show up for only the first of a run? -->
 		@{name}:
 	</span>
 	{#each messages as { at, body }}