From fbe8229a0a4e1d2d68d6b3f5e58ea6482abca84e Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Wed, 22 Mar 2023 16:30:05 +0100
Subject: [PATCH] Make sure room name is truncated in UI if too long

---
 src/assets/css/chat.scss      | 1 +
 src/components/ChatHeader.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index 7847de6..bbd7cbe 100644
--- a/src/assets/css/chat.scss
+++ b/src/assets/css/chat.scss
@@ -67,6 +67,7 @@ body {
     align-items: center;
   }
   .chat-header-name {
+    width: 0px; // Set to 0 for flexbox autosize
     cursor: pointer;
   }
   .chat-header-members {
diff --git a/src/components/ChatHeader.vue b/src/components/ChatHeader.vue
index fa109f1..3b6db9a 100644
--- a/src/components/ChatHeader.vue
+++ b/src/components/ChatHeader.vue
@@ -12,7 +12,7 @@
           }}</span>
         </v-avatar>
       </v-col>
-      <v-col class="chat-header-name ma-0 pa-0 flex-shrink-1 flex-nowrap" @click.stop="onHeaderClicked">
+      <v-col class="chat-header-name ma-0 pa-0 flex-shrink-1 flex-grow-1 flex-nowrap" @click.stop="onHeaderClicked">
         <div class="room-title-row">
           <div class="room-name-inline text-truncate" :title="room.name">
             {{ room.name }}