When a chat is selected, the header now shows the member list

src/components/HeaderInfoContainerComponent.vue

@@ -19,6 +19,10 @@
   .displayName {
     height: 100%;
     margin: 0.5rem 1rem;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 200px;
   }
 
   .image {

src/pages/IndexPage.vue

@@ -126,11 +126,20 @@
           :image="selectedUser.profilePictureUrl"
         ></HeaderInfoContainerComponent>
 
-        <div v-if="selectedChat.id != null">
+        <div v-if="selectedChat.id != null" style="display: flex;">
           <HeaderInfoContainerComponent  
             :displayName="selectedChat.displayName"
             image="https://i.pinimg.com/736x/f2/6d/38/f26d38b9685a48e8a43481391f75471c.jpg"
           ></HeaderInfoContainerComponent>
+
+          <div>
+            <p style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;line-height: 14px;height:50px;margin: 0px;display: table-cell;vertical-align: middle;padding: 10px;max-width: 300px;">
+              <span>Du, </span>
+              <span v-for="(user, index) in selectedChat.members.filter(u => u.id != userStore.user!.id)">@{{ user.username }}{{ index < selectedChat.members.length - 2 ? ", " : "" }} </span>
+            </p>
+          </div>
+
+          <!--<ChatSettingsComponent :chat="selectedChat"></ChatSettingsComponent>-->
         </div>
         
       </div>
@@ -223,6 +232,7 @@
   import {useUserStore} from 'stores/user-store';
   import { useChatStore } from 'stores/chat-store';
   import SettingsPopUp from 'src/components/SettingsPopUp.vue';
+  import ChatSettingsComponent from 'src/components/ChatSettingsComponent.vue';
 
   defineOptions({
     name: 'IndexPage'