Improve stying for /me messages

Show the actions dropdown on the right, like with other messages, and
don't wrap them.

sass/_messages.scss

@@ -281,21 +281,22 @@
                 min-width: var(--message-avatar-width);
             }
 
+            .chat-msg__author {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                font-family: var(--heading-font);
+                font-size: 115%;
+                font-weight: bold;
+                padding-bottom: 1px; // Hack to avoid cutting of text on the button
+            }
+
             .chat-msg__heading {
                 width: 100%;
                 margin-top: 0.5em;
                 padding-right: 0.25rem;
                 padding-bottom: 0.25rem;
 
-                .chat-msg__author {
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    font-family: var(--heading-font);
-                    font-size: 115%;
-                    font-weight: bold;
-                    padding-bottom: 1px; // Hack to avoid cutting of text on the button
-                }
                 .badge {
                     margin-left: 0.5em;
                     font-family: var(--normal_font);
@@ -307,10 +308,8 @@
                 }
             }
             &.chat-msg--action {
-                .chat-msg__content {
-                    flex-wrap: wrap;
+                .chat-msg__message {
                     flex-direction: row;
-                    justify-content: flex-start;
                 }
                 .chat-msg__text {
                     width: auto;

src/templates/chat_message.js

@@ -17,17 +17,18 @@ export default (o) => {
 
             ${ o.shouldShowAvatar() ? renderAvatar(o.getAvatarData()) : '' }
             <div class="chat-msg__content chat-msg__content--${o.sender} ${o.is_me_message ? 'chat-msg__content--action' : ''}">
-                <span class="chat-msg__heading">
-                    ${ (o.is_me_message) ? html`
-                        <time timestamp="${o.time}" class="chat-msg__time">${o.pretty_time}</time>
-                        ${o.hats.map(hat => html`<span class="badge badge-secondary">${hat}</span>`)}
-                    ` : '' }
-                    <span class="chat-msg__author">${ o.is_me_message ? '**' : ''}${o.username}</span>
-                    ${ !o.is_me_message ? o.renderAvatarByline() : '' }
-                    ${ o.is_encrypted ? html`<span class="fa fa-lock"></span>` : '' }
-                </span>
+
+                ${ !o.is_me_message ? html`
+                    <span class="chat-msg__heading">
+                        <span class="chat-msg__author">${o.username}</span>
+                        ${ o.renderAvatarByline() }
+                        ${ o.is_encrypted ? html`<span class="fa fa-lock"></span>` : '' }
+                    </span>` : '' }
                 <div class="chat-msg__body chat-msg__body--${o.message_type} ${o.received ? 'chat-msg__body--received' : '' } ${o.is_delayed ? 'chat-msg__body--delayed' : '' }">
                     <div class="chat-msg__message">
+                        ${ (o.is_me_message) ? html`
+                            <time timestamp="${o.time}" class="chat-msg__time">${o.pretty_time}</time>&nbsp;
+                            <span class="chat-msg__author">${ o.is_me_message ? '**' : ''}${o.username}</span>&nbsp;` : '' }
                         ${ o.is_retracted ? o.renderRetraction() : o.renderMessageText() }
                     </div>
                     <converse-message-actions