Interface SAV

src/assets/chat.scss

@@ -12,64 +12,16 @@ body{
   width: 100%;
   box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
 }
-.chat-app .people-list {
-  width: 280px;
-  position: absolute;
-  left: 0;
+.standard-message-list {
+  width: 0;
+  position: absolute; /* Stay in place */
   top: 0;
-  padding: 20px;
-  z-index: 7
-}
-
-.chat-app .chat {
-  margin-left: 280px;
-  border-left: 1px solid #eaeaea
-}
-
-.people-list {
-  -moz-transition: .5s;
-  -o-transition: .5s;
-  -webkit-transition: .5s;
-  transition: .5s
-}
-
-.people-list .chat-list li {
-  padding: 10px 15px;
-  list-style: none;
-  border-radius: 3px
-}
-
-.people-list .chat-list li:hover {
-  background: #efefef;
-  cursor: pointer
-}
-
-.people-list .chat-list li.active {
-  background: #efefef
-}
-
-.people-list .chat-list li .name {
-  font-size: 15px
-}
-
-.people-list .chat-list img {
-  width: 45px;
-  border-radius: 50%
-}
-
-.people-list img {
-  float: left;
-  border-radius: 50%
-}
-
-.people-list .about {
-  float: left;
-  padding-left: 8px
-}
-
-.people-list .status {
-  color: #999;
-  font-size: 13px
+  left: 0;
+  z-index: 7;
+  max-height :100%;
+  overflow-y: auto;
+  overflow-x: hidden; /* Disable horizontal scroll */
+  transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
 }
 
 .chat .chat-header {
@@ -77,11 +29,6 @@ body{
   border-bottom: 2px solid #f4f7f6
 }
 
-.chat .chat-header img {
-  float: left;
-  border-radius: 40px;
-  width: 40px
-}
 
 .chat .chat-header .chat-about {
   float: left;
@@ -258,4 +205,4 @@ body{
     height: calc(100vh - 350px);
     overflow-x: auto
   }
-}
+}