Add more mobile styling

1 files changed, 10 insertions, 1 deletions

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>