From c489d58a6967048c8497afd7da276ffee2335893 Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Tue, 9 Feb 2021 11:10:17 +0100
Subject: [PATCH] Fix chat header on mobile

And also improve QR display
---
 src/assets/css/chat.scss      |  8 ++++++--
 src/components/ChatHeader.vue | 15 ++++++++-------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 23a5010..2257cc3 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -361,11 +361,15 @@ $admin-fg: white;
     border: 2px solid white;
     border-radius: 13px;
     height: 26px;
-    width: fit-content;
-    right: 10px;
+    width: max-content;
     top: -15px;
     padding: 0px 6px;
+    .messageOut & {
+        right: 10px;
+    }
     .quick-reaction {
+        position: relative;
+        top: -2px;
         margin: 0px 0px;
         padding: 1px;
         font-size: 10px;
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index 7bfb7c7..7502a35 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -1,23 +1,24 @@
 <template>
   <v-container fluid v-if="room">
-    <v-row class="chat-header-row">
+    <v-row class="chat-header-row flex-nowrap">
       <v-col
-        class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0"
+      cols="auto"
+        class="chat-header-members text-start ma-0 pa-0"
       >
-        <v-avatar size="40">
+        <v-avatar size="40" class="mr-2">
           <v-img :src="room.avatar" />
         </v-avatar>
       </v-col>
 
-      <v-col class="flex-grow-1 flex-shrink-1 ma-0 pa-0">
-        <div class="room-name" @click.stop="showRoomList = true">{{ room.summary.info.title }} <v-icon>expand_more</v-icon></div>
+      <v-col class="ma-0 pa-0 flex-shrink-1 flex-nowrap" style="overflow:hidden">
+        <div class="d-flex flex-nowrap room-name" @click.stop="showRoomList = true">{{ room.summary.info.title }} <v-icon>expand_more</v-icon></div>
         <RoomList v-if="showRoomList" v-click-outside="hideRoomList" @close="hideRoomList" />
         <div class="num-members">{{ memberCount }}{{ memberCount > 1 ? " members" : " member" }}</div>
       </v-col>
-      <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
+      <v-col cols="auto" class="text-end ma-0 pa-0">
         <v-btn text class="info-button" @click.stop="showRoomInfo"><v-icon color="black">info</v-icon></v-btn>
       </v-col>
-      <v-col class="text-center flex-grow-0 flex-shrink-1 ma-0 pa-0">
+      <v-col cols="auto" class="text-end ma-0 pa-0">
         <v-btn text class="leave-button" @click.stop="leaveRoom">Leave</v-btn>
       </v-col>
     </v-row>