fix: Fix mobile view of the unread message on the chat application dr…

…awer - EXO-62457 (#603) (#604)

Before to this change on mobile view the unread message count was displayed under the last message time .
This change is going to display the unread message count aligned with the last message time.

application/src/main/webapp/css/chatMobile.less

@@ -233,20 +233,11 @@
         margin-right: 10px ~'; /** orientation=lt */ ';
         margin-left: 10px ~'; /** orientation=rt */ ';
       }
-      &.hasUnreadMessages .last-message-time {
-        margin-right: -27px ~'; /** orientation=lt */ ';
-        margin-left: -27px ~'; /** orientation=rt */ ';
-      }
       &.has-not-sent-messages .last-message-time {
         margin-right: -19px ~'; /** orientation=lt */ ';
         margin-left: -19px ~'; /** orientation=rt */ ';
       }
-      .unreadMessages, .uiIconNotification {
-        align-self: flex-end;
-      }
       .unreadMessages {
-        .square-rounded(16px);
-        margin-bottom: 5px;
         color: #fff;
       }
       .seeMoreContacts > a, .uiIconArrowDownMini:before {

application/src/main/webapp/vue-app/components/ExoChatContact.vue

@@ -56,12 +56,12 @@
     </div>
     <div
       v-if="!isRoomSilent && unreadTotal > 0 && unreadTotal <= maxShowUnread"
-      :class="['unreadMessages', {'mt-10':mq==='mobile'}]">
+      :class="['unreadMessages']">
       {{ unreadTotal }}
     </div>
     <div
       v-if="!isRoomSilent && unreadTotal > maxShowUnread"
-      :class="['unreadMessages', 'maxUnread', {'mt-10':mq==='mobile'}]">
+      :class="['unreadMessages', 'maxUnread']">
       +{{ maxShowUnread }}
     </div>
     <div>