From 610f6839d2e449d172aa6ac35e6c1de0677a0754 Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Wed, 30 Oct 2024 16:47:19 -0400
Subject: Add more mobile styling

---
 ui/lib/components/Message.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

(limited to 'ui/lib/components')

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>
-- 
cgit v1.2.3