From ba6a591f3d3c8d8a86ad29591da2130ed521f365 Mon Sep 17 00:00:00 2001
From: negue <eugen.bolz@gmail.com>
Date: Sun, 5 Jan 2025 23:30:45 +0100
Subject: [PATCH] fix chatMessages (party chat) message spacing

---
 .../client/src/components/chat/chatMessages.vue  | 16 ++++++++++++++++
 website/client/src/components/groups/chat.vue    |  6 +++---
 .../src/components/messages/messageList.vue      |  2 +-
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/website/client/src/components/chat/chatMessages.vue b/website/client/src/components/chat/chatMessages.vue
index 6f6996516ab..d4218d19808 100644
--- a/website/client/src/components/chat/chatMessages.vue
+++ b/website/client/src/components/chat/chatMessages.vue
@@ -24,6 +24,8 @@
     <div
       v-for="msg in messages.filter(m => chat && canViewFlag(m))"
       :key="msg.id"
+      class="message-row"
+      :class="{ 'margin-right': user._id !== msg.uuid}"
     >
       <div class="d-flex">
         <avatar
@@ -135,6 +137,18 @@
   .message-scroll .d-flex {
     min-width: 1px;
   }
+
+  .message-row {
+    margin-left: 12px;
+    margin-right: 0;
+    margin-bottom: 1.2rem;
+
+    &:not(.margin-right) {
+      .d-flex {
+        justify-content: flex-end;
+      }
+    }
+  }
 </style>
 
 <script>
@@ -147,6 +161,8 @@ import { userStateMixin } from '../../mixins/userState';
 import Avatar from '../avatar';
 import MessageCard from '@/components/messages/messageCard.vue';
 
+// TODO merge chatMessages.vue (party message list) with messageList.vue (private message list)
+
 export default {
   components: {
     MessageCard,
diff --git a/website/client/src/components/groups/chat.vue b/website/client/src/components/groups/chat.vue
index 150a84e3194..213312977d7 100644
--- a/website/client/src/components/groups/chat.vue
+++ b/website/client/src/components/groups/chat.vue
@@ -74,7 +74,7 @@
       <slot name="additionRow"></slot>
       <div class="row">
         <div class="hr col-12"></div>
-        <chat-message
+        <chat-messages
           :chat.sync="group.chat"
           :group-type="group.type"
           :group-id="group._id"
@@ -91,7 +91,7 @@ import externalLinks from '../../mixins/externalLinks';
 
 import autocomplete from '../chat/autoComplete';
 import communityGuidelines from './communityGuidelines';
-import chatMessage from '../chat/chatMessages';
+import chatMessages from '../chat/chatMessages';
 import { mapState } from '@/libs/store';
 import markdownDirective from '@/directives/markdown';
 import { autoCompleteHelperMixin } from '@/mixins/autoCompleteHelper';
@@ -103,7 +103,7 @@ export default {
   components: {
     autocomplete,
     communityGuidelines,
-    chatMessage,
+    chatMessages,
   },
   mixins: [externalLinks, autoCompleteHelperMixin],
   props: ['label', 'group', 'placeholder'],
diff --git a/website/client/src/components/messages/messageList.vue b/website/client/src/components/messages/messageList.vue
index 9ece4e50d26..aaee83764c2 100644
--- a/website/client/src/components/messages/messageList.vue
+++ b/website/client/src/components/messages/messageList.vue
@@ -111,7 +111,7 @@
 }
 
 .message-list {
- width: 100%;
+  width: 100%;
   padding-right: 10px;
   margin-right: 0 !important;
 }