room details header improvement and fixes

src/assets/css/_utilities.scss

@@ -18,3 +18,9 @@
 .white-space-pre {
     white-space: pre;
 }
+.v-visible {
+    visibility: visible;
+}
+.v-hidden {
+    visibility: hidden;
+}

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 {

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
         >