From 1d29c6da1837d062432e4c2ad9d95eb9ec9e7137 Mon Sep 17 00:00:00 2001
From: Noah Petherbridge <root@kirsle.net>
Date: Sat, 30 Sep 2023 15:18:55 -0700
Subject: [PATCH] Tweak compact display option

---
 src/App.vue                   |  2 +-
 src/components/MessageBox.vue | 45 ++++++++++++++++++++---------------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 49f6401..b18bd42 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3633,7 +3633,7 @@ export default {
                 </div>
                 <div class="card-content" id="chatHistory"
                     :class="{ 'has-background-dm': isDM,
-                              'p-1': messageStyle.indexOf('compact') === 0 }">
+                              'p-1 pb-5': messageStyle.indexOf('compact') === 0 }">
 
                     <div class="autoscroll-field tag">
                         <label class="checkbox is-size-6" title="Automatically scroll when new chat messages come in.">
diff --git a/src/components/MessageBox.vue b/src/components/MessageBox.vue
index e74e9f6..eaa8404 100644
--- a/src/components/MessageBox.vue
+++ b/src/components/MessageBox.vue
@@ -361,31 +361,38 @@ export default {
 
         <!-- Name/username/message -->
         <div class="column px-1">
-            [<a :href="profileURL"
-                @click.prevent="openProfile()"
-                :class="{ 'cursor-default': !profileURL }">
-                <!-- Display name? -->
-                <strong v-if="(message.isChatServer || message.isChatClient || message.isAdmin)
-                               || (appearance === 'compact' && nickname !== message.username)"
+            <strong
+                :class="{
+                            'has-text-success is-dark': message.isChatServer,
+                            'has-text-warning is-dark': message.isAdmin,
+                            'has-text-danger': message.isChatClient
+                        }">
+                [<a :href="profileURL"
+                    @click.prevent="openProfile()"
                     class="has-text-dark"
-                    :class="{
-                                'has-text-success is-dark': message.isChatServer,
-                                'has-text-warning is-dark': message.isAdmin,
-                                'has-text-danger': message.isChatClient
-                            }">
-                    {{ nickname }}
-                </strong>
+                    :class="{ 'cursor-default': !profileURL }">
+                    <!-- Display name? -->
+                    <span v-if="(message.isChatServer || message.isChatClient || message.isAdmin)
+                                || (appearance === 'compact' && nickname !== message.username)"
+                        :class="{
+                            'has-text-success is-dark': message.isChatServer,
+                            'has-text-warning is-dark': message.isAdmin,
+                            'has-text-danger': message.isChatClient
+                        }">
+                        {{ nickname }}
+                    </span>
 
-                <small class="has-text-grey"
-                    :class="{'ml-1': appearance === 'compact' && nickname !== message.username}"
-                    v-if="!(message.isChatServer || message.isChatClient || message.isAdmin)"
-                >@{{ message.username }}</small>
-            </a>]
+                    <small class="has-text-grey"
+                        :class="{'ml-1': appearance === 'compact' && nickname !== message.username}"
+                        v-if="!(message.isChatServer || message.isChatClient || message.isAdmin)"
+                    >@{{ message.username }}</small>
+                </a>]
+            </strong>
 
             <span v-html="compactMessage"></span>
 
             <!-- Reactions so far? -->
-            <div v-if="hasReactions" class="mt-1">
+            <div v-if="hasReactions" class="my-1">
                 <span v-for="(users, emoji) in reactions"
                     v-bind:key="emoji"
                     class="tag is-secondary mr-1 cursor-pointer"