greatly improve message layout

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>
+    <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>