Fix

src/app/pages/chat/group-messages/group-messages.page.scss

@@ -22,7 +22,7 @@
            .middle{
             padding: 0!important;
             float: left;
-            width: 280px;
+            width:calc(100% - 77px);
             margin: 2.5px 0 0 5px;
           }
           .right{
@@ -60,6 +60,10 @@
 
         .title{
           font-size: 25px;
+          white-space: nowrap;
+          overflow: hidden !important;
+          text-overflow: ellipsis !important;
+          float: left;
         }
         .div-icon{
           width: 40px;

src/app/pages/chat/group-messages/group-messages.page.ts

@@ -184,6 +184,7 @@ export class GroupMessagesPage implements OnInit, AfterViewChecked {
     });
     return await popover.present();
   }
+
   async addContacts(){
     console.log(this.members);
 

src/app/pages/chat/messages/messages.page.html

@@ -75,8 +75,8 @@
 <ion-footer>
   <div class="container width-100 d-flex">
     <div>
-      <button class="btn-no-color"> <!-- (click)="openChatOptions()" -->
-        <ion-icon class="chat-icon-options" src="assets/icon/icons-chat-options.svg"></ion-icon>
+      <button class="btn-no-color" (click)="openChatOptions()">
+        <ion-icon class="chat-icon-options" src="assets/images/icons-add-new-event.svg"></ion-icon>
       </button>
     </div>
     <div class="width-70">

src/app/pages/chat/messages/messages.page.scss

@@ -29,7 +29,7 @@
            .middle{
             padding: 0!important;
             float: left;
-            width: 280px;
+            width:calc(100% - 77px);
             margin: 2.5px 0 0 5px;
             display: flex;
             align-items: center;
@@ -70,7 +70,9 @@
 
         .title{
           font-size: 25px;
-          overflow: auto;
+          white-space: nowrap;
+          overflow: hidden !important;
+          text-overflow: ellipsis !important;
           float: left;
         }
         .div-icon{
@@ -154,14 +156,15 @@
  .container{
    justify-content: center;
    justify-content: space-evenly;
+   align-items: center;
 
  }
 
  .chat-icon-options{
    display:block !important;
-   font-size: 25px;
+   font-size: 35px;
    float: right !important;
-   margin-top: 10px;
+   margin-top: 5px;
  }
 
  .chat-icon-send{

src/app/pages/chat/messages/messages.page.ts

@@ -29,6 +29,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   dmUsers:any;
   roomId:string;
   el:any;
+  members:any;
 
   connection  = connection
 
@@ -117,6 +118,7 @@ export class MessagesPage implements OnInit, AfterViewChecked {
   getChatMembers() {
     this.showLoader = true;
     this.chatService.getMembers(this.roomId).subscribe(res=> {
+      this.members = res['members'];
       this.dmUsers = res['members'].filter(data => data.username != this.loggedUser.me.username)
       console.log(res);
       console.log(this.dmUsers);
@@ -150,11 +152,18 @@ export class MessagesPage implements OnInit, AfterViewChecked {
     modal.onDidDismiss();
   }
 
-async openChatOptions(ev?: any) {
+  async openChatOptions(ev?: any) {
+    console.log(this.members);
+
     const popover = await this.popoverController.create({
       component: ChatOptionsPopoverPage,
       cssClass: 'chat-options-popover',
       event: ev,
+      componentProps: {
+        room: this.roomId,
+        members: this.members,
+        eventSelectedDate: new Date(),
+      },
       translucent: true
     });
     return await popover.present();