Mobile responsive issue fix

src/ng-chat/assets/ng-chat.component.default.css

@@ -21,11 +21,11 @@
 #ng-chat-people
 {
     position: relative;
-    width: 240px;
+    width: 300px;
     height:360px;
     border-width: 1px;
     border-style: solid;
-    margin-right:20px;
+    margin-right: 20px;
     box-shadow: 0 4px 8px rgba(0,0,0,.25);
     border-bottom:0;
 }
@@ -212,15 +212,15 @@
 }
 .ng-chat-window
 {
-    right:260px;
-    height:360px;
-    z-index:999;
-    bottom:0;
+    right: 260px;
+    height: 360px;
+    z-index: 999;
+    bottom: 0;
+    width: 300px;
     position: fixed;
-    width:300px;
     border-width: 1px;
     border-style: solid;
-    border-bottom:0;
+    border-bottom: 0;
     box-shadow: 0 4px 8px rgba(0,0,0,.25);
 }
 .ng-chat-window-collapsed
@@ -417,3 +417,17 @@
     float: right;
     margin-right: 5px;
 }
+
+@media only screen and (max-width: 768px) { 
+     #ng-chat-people
+     {
+         width: 270px;
+         height: 360px;
+         margin-right: 0;
+     }
+
+      .ng-chat-window
+     {
+         position: initial;
+     }
+ }

src/ng-chat/ng-chat.component.ts

@@ -133,7 +133,10 @@ export class NgChat implements OnInit, IChatController {
 
     @Input()
     public showMessageDate: boolean = true;
-
+
+    @Input()
+    public isViewportOnMobileEnabled: boolean = false;
+
     @Output()
     public onParticipantClicked: EventEmitter<IChatParticipant> = new EventEmitter<IChatParticipant>();
 
@@ -256,8 +259,8 @@ export class NgChat implements OnInit, IChatController {
 
         this.updateWindowsState(this.windows);
 
-        // Viewport should have space for at least one chat window.
-        this.unsupportedViewport = this.hideFriendsListOnUnsupportedViewport && maxSupportedOpenedWindows < 1;
+        // Viewport should have space for at least one chat window but should show in mobile if option is enabled.
+        this.unsupportedViewport = this.isViewportOnMobileEnabled? false : this.hideFriendsListOnUnsupportedViewport && maxSupportedOpenedWindows < 1;
     }
 
     // Initializes the chat plugin and the messaging adapter
@@ -512,10 +515,11 @@ export class NgChat implements OnInit, IChatController {
 
             this.windows.unshift(newChatWindow);
 
-            // Is there enough space left in the view port ?
-            if (this.windows.length * this.windowSizeFactor >= this.viewPortTotalArea - (!this.hideFriendsList ? this.friendsListWidth : 0))
-            {                
-                this.windows.pop();
+            // Is there enough space left in the view port ? but should be displayed in mobile if option is enabled
+            if (!this.isViewportOnMobileEnabled) {
+                if (this.windows.length * this.windowSizeFactor >= this.viewPortTotalArea - (!this.hideFriendsList ? this.friendsListWidth : 0)) {
+                    this.windows.pop();
+                }
             }
 
             this.updateWindowsState(this.windows);

src/spec/ng-chat.component.spec.ts

@@ -97,7 +97,11 @@ describe('NgChat', () => {
     it('Persistent windows state must be enabled by default', () => {
         expect(subject.persistWindowsState).toBeTruthy();
     });
-
+
+    it('Is viewport mobile case state must be disabled by default', () => {
+        expect(subject.isViewportOnMobileEnabled).toBeFalsy();
+    });
+
     it('isCollapsed must be disabled by default', () => {
         expect(subject.isCollapsed).toBeFalsy();
     });