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 }}