2 files changed, 17 insertions, 2 deletions
diff --git a/ui/lib/components/Channel.svelte b/ui/lib/components/Channel.svelte
index e62f0f3..bbe9ff7 100644
--- a/ui/lib/components/Channel.svelte
+++ b/ui/lib/components/Channel.svelte
@@ -1,14 +1,20 @@
 <script>
+    import { showMenu } from '$lib/store';
+
     export let id;
     export let name;
     export let active = false;
+
+    function hideMenu() {
+        showMenu.update(() => false);
+    }
 </script>
 
 <li
     class="rounded-full"
     class:bg-slate-400={active}
 >
-<a href="/ch/{id}">
+<a href="/ch/{id}" on:click={hideMenu}>
     <span class="badge bg-primary-500">#</span>
     <span class="flex-auto">{name}</span>
 </a>
diff --git a/ui/lib/components/Message.svelte b/ui/lib/components/Message.svelte
index d040433..2705e4b 100644
--- a/ui/lib/components/Message.svelte
+++ b/ui/lib/components/Message.svelte
@@ -10,9 +10,10 @@
     let timestamp = new Date(at).toTimeString();
     let name;
     $: name = $logins.get(sender);
+    $: ownMessage = $currentUser.id == sender;
 </script>
 
-<div class="card card-hover m-4 relative">
+<div class="card card-hover m-4 relative" class:own-message={ownMessage} class:other-message={!ownMessage}>
     <span class="chip variant-soft sticky top-o left-0">
         <!-- TODO: should this show up for only the first of a run? -->
         @{name}:
@@ -30,4 +31,12 @@
     .card:hover .timestamp {
         display: flex;
     }
+    .own-message {
+        width: 80%;
+        margin-right: auto;
+    }
+    .other-message {
+        width: 80%;
+        margin-left: auto;
+    }
 </style>