Display: Improve styles for message list and message show pages - refs BT#21705

assets/css/scss/_messages.scss

@@ -0,0 +1,15 @@
+.message-list {
+  &__actions {
+    @apply flex gap-2 justify-end items-center flex-wrap mb-4;
+  }
+}
+
+.message-show {
+  &__tags-container {
+    @apply flex justify-end gap-2 items-center;
+  }
+
+  &__tag-searcher.field {
+    @apply mb-0;
+  }
+}

assets/css/scss/index.scss

@@ -76,6 +76,7 @@
 @import 'catalog_session';
 //@import 'jqueryui';
 @import 'lp';
+@import "messages";
 @import "userreluser";
 @import 'social';
 @import 'skill';

assets/vue/views/message/MessageList.vue

@@ -1,46 +1,46 @@
 <template>
-  <SectionHeader :title="title">
-    <BaseButton
-      icon="email-plus"
-      only-icon
-      type="black"
-      @click="goToCompose"
-    />
-
-    <BaseButton
-      :disabled="isLoading"
-      icon="refresh"
-      only-icon
-      type="black"
-      @click="refreshMessages"
-    />
-
-    <BaseButton
-      :disabled="0 === selectedItems.length || isLoading"
-      icon="delete"
-      only-icon
-      type="black"
-      @click="showDlgConfirmDeleteMultiple"
-    />
-
-    <BaseButton
-      :disabled="0 === selectedItems.length || isLoading"
-      icon="multiple-marked"
-      only-icon
-      popup-identifier="course-messages-list-tmenu"
-      type="black"
-      @click="mToggleMessagesList"
-    />
-
-    <BaseMenu
-      id="course-messages-list-tmenu"
-      ref="mMessageList"
-      :model="mItemsMarkAs"
-    />
-  </SectionHeader>
-
-  <div class="message-container">
-    <div class="message-actions">
+  <div class="message-list">
+    <SectionHeader :title="title">
+      <BaseButton
+        icon="email-plus"
+        only-icon
+        type="black"
+        @click="goToCompose"
+      />
+
+      <BaseButton
+        :disabled="isLoading"
+        icon="refresh"
+        only-icon
+        type="black"
+        @click="refreshMessages"
+      />
+
+      <BaseButton
+        :disabled="0 === selectedItems.length || isLoading"
+        icon="delete"
+        only-icon
+        type="black"
+        @click="showDlgConfirmDeleteMultiple"
+      />
+
+      <BaseButton
+        :disabled="0 === selectedItems.length || isLoading"
+        icon="multiple-marked"
+        only-icon
+        popup-identifier="course-messages-list-tmenu"
+        type="black"
+        @click="mToggleMessagesList"
+      />
+
+      <BaseMenu
+        id="course-messages-list-tmenu"
+        ref="mMessageList"
+        :model="mItemsMarkAs"
+      />
+    </SectionHeader>
+
+    <div class="message-list__actions">
       <BaseButton
         :label="t('Inbox')"
         icon="inbox"

assets/vue/views/message/MessageShow.vue

@@ -32,17 +32,15 @@
       />
     </SectionHeader>
 
-    <div class="flex justify-end gap-2">
-      <div v-if="myReceiver">
-        <BaseChip
-          v-for="tag in myReceiver.tags"
-          :key="tag['@id']"
-          :value="tag"
-          is-removable
-          label-field="tag"
-          @remove="onRemoveTagFromMessage(tag)"
-        />
-      </div>
+    <div class="message-show__tags-container">
+      <BaseChip
+        v-for="tag in myReceiver.tags"
+        :key="tag['@id']"
+        :value="tag"
+        is-removable
+        label-field="tag"
+        @remove="onRemoveTagFromMessage(tag)"
+      />
 
       <BaseAutocomplete
         v-if="item.sender && item.sender['@id'] !== securityStore.user['@id']"
@@ -51,6 +49,7 @@
         :label="t('Tags')"
         :search="onSearchTags"
         option-label="tag"
+        class="message-show__tag-searcher"
         @item-select="onItemSelect"
       />
     </div>