From 52869784a5e955bbf446a53bfd46747cc73cd8af Mon Sep 17 00:00:00 2001
From: 10G Meow <10gmeow@gmail.com>
Date: Sun, 10 Apr 2022 11:56:24 +0300
Subject: [PATCH] room details header improvement and fixes

---
 src/assets/css/_utilities.scss | 6 ++++++
 src/assets/css/chat.scss       | 4 +++-
 src/components/RoomInfo.vue    | 9 ++++-----
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/assets/css/_utilities.scss b/src/assets/css/_utilities.scss
index f7c4fd3..53f4bfb 100644
--- a/src/assets/css/_utilities.scss
+++ b/src/assets/css/_utilities.scss
@@ -18,3 +18,9 @@
 .white-space-pre {
     white-space: pre;
 }
+.v-visible {
+    visibility: visible;
+}
+.v-hidden {
+    visibility: hidden;
+}
\ No newline at end of file
diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 6ea6685..f8dde87 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -818,7 +818,9 @@ $admin-fg: white;
     }
 
     .filled-button {
-        min-width: 180px !important;
+        @media #{map-get($display-breakpoints, 'sm-and-up')} {
+            min-width: 180px !important;
+        }
     }
 
     .v-card {
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index 4cb538b..56169cf 100644
--- a/src/components/RoomInfo.vue
+++ b/src/components/RoomInfo.vue
@@ -1,23 +1,22 @@
 <template>
   <div v-if="room" class="room-info">
     <div class="chat-header">
-      <v-container fluid>
-        <div class="room-name no-upper">{{ $t("room_info.title") }}</div>
+      <v-container fluid class="d-flex justify-space-between align-center">
         <v-btn
           id="btn-back"
           text
-          class="header-button-left"
-          v-show="$navigation && $navigation.canPop()"
+          :class="$navigation && $navigation.canPop() ? 'v-visible' : 'v-hidden'"
           @click.stop="$navigation.pop"
         >
           <v-icon>arrow_back</v-icon>
           <span>{{ $t("menu.back") }}</span>
         </v-btn>
+        <div class="room-name no-upper">{{ $t("room_info.title") }}</div>
         <v-btn
           id="btn-leave-room"
           color="black"
           depressed
-          class="header-button-right filled-button me-3"
+          class="filled-button"
           @click.stop="showLeaveConfirmation = true"
           >👋 {{ $t("room_info.leave_room") }}</v-btn
         >