From 3ea2b81b01f0211e5e2583dff30bdeae52997d63 Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sun, 30 Oct 2022 21:44:46 +0200
Subject: [PATCH] greatly improve message layout

---
 frontend/src/components/Message.svelte | 27 ++++++++++++++++----------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/Message.svelte b/frontend/src/components/Message.svelte
index 36c7d03..aa06eeb 100644
--- a/frontend/src/components/Message.svelte
+++ b/frontend/src/components/Message.svelte
@@ -20,10 +20,10 @@
 <style>
     .message {
         display: flex;
+        justify-content: center;
         align-items: flex-start;
-        align-items: center;
         overflow-x: hidden;
-        word-break: break-all;
+        word-wrap: break-word;
         padding: var(--space-xs) var(--space-xs) var(--space-xs) var(--space-normplus);
     }
 
@@ -65,6 +65,12 @@
         margin-right: 0;
     }
 
+    .author-group {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
     .edit-message {
         flex-shrink: 0;
         float: right;
@@ -87,12 +93,12 @@
         user-select: none;
     }
 
-    .message.clumped .author {
+    .message.clumped .author-group {
         visibility: hidden;
     }
 
     .message:hover .date,
-    .message.clumped:hover .author {
+    .message.clumped:hover .author-group {
         visibility: visible;
     }
 
@@ -118,16 +124,17 @@
         margin-left: var(--space-xs);
         margin-right: var(--space-md);
         cursor: default;
+        flex-shrink: 0;
     }
 </style>
 
 <div class="message" class:clumped={ message._clumped } class:pinged={ message._mentions }>
-    <span class="author" class:author-more={message._viaBadge}>
-        { message._effectiveAuthor }
-    </span>
-    {#if message._viaBadge}
-        <span class="user-badge via-badge">via { message._viaBadge }</span>
-    {/if}
+    <div class="author-group">
+        <span class="author" class:author-more={message._viaBadge}>{ message._effectiveAuthor }</span>
+        {#if message._viaBadge}
+            <span class="user-badge via-badge">via { message._viaBadge }</span>
+        {/if}
+    </div>
     <span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
 
     <span class="date message-extra">{ message._createdAtTimeString }</span>