From 759ed43745b69ec04478191d0a69efa9081ee9c8 Mon Sep 17 00:00:00 2001
From: Nithin David Thomas <webofnithin@gmail.com>
Date: Mon, 8 Mar 2021 13:30:33 +0530
Subject: [PATCH] Chore: Responsive fixes for common screen widths (#1856)

---
 .../dashboard/assets/scss/_foundation-settings.scss |  4 +++-
 app/javascript/dashboard/components/ChatList.vue    |  7 +++++--
 .../widgets/conversation/ConversationBox.vue        | 13 ++++++++-----
 3 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
index 79bc1ae29..e8862b5bf 100644
--- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss
+++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss
@@ -89,7 +89,9 @@ $breakpoints: (small: 0,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
-  xxlarge: 1440px);
+  xxlarge: 1400px,
+  xxxlarge: 1600px,
+);
 $print-breakpoint: large;
 $breakpoint-classes: (small medium large);
 
diff --git a/app/javascript/dashboard/components/ChatList.vue b/app/javascript/dashboard/components/ChatList.vue
index 09e55e8c3..6603a25c6 100644
--- a/app/javascript/dashboard/components/ChatList.vue
+++ b/app/javascript/dashboard/components/ChatList.vue
@@ -232,10 +232,13 @@ export default {
     width: 36rem;
   }
   @include breakpoint(xlarge up) {
-    width: 33rem;
+    width: 35rem;
   }
   @include breakpoint(xxlarge up) {
-    width: 42rem;
+    width: 38rem;
+  }
+  @include breakpoint(xxxlarge up) {
+    flex-basis: 46rem;
   }
 }
 </style>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
index 2a29df541..32471638c 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationBox.vue
@@ -87,23 +87,26 @@ export default {
 
 .conversation-sidebar-wrap {
   height: auto;
-  flex: 0 1;
+  flex: 0 0;
   overflow: hidden;
   overflow: auto;
   background: white;
-  flex-shrink: 0;
   flex-basis: 28rem;
 
   @include breakpoint(large up) {
-    flex-basis: 31em;
+    flex-basis: 30em;
   }
 
   @include breakpoint(xlarge up) {
-    flex-basis: 32em;
+    flex-basis: 31em;
   }
 
   @include breakpoint(xxlarge up) {
-    flex-basis: 36rem;
+    flex-basis: 33rem;
+  }
+
+  @include breakpoint(xxxlarge up) {
+    flex-basis: 40rem;
   }
 
   &::v-deep .contact--panel {