FINALLY FIXED THE UNREAD CHAT MESSAGES!

website/public/styles/chat.css

@@ -1,34 +1,38 @@
 /* Overall chat-screen */
 .chat {
     position: fixed;
+
     top: 80px;
     left: 256px;
-    padding: 20px 0;
     width: calc(100% - 256px);
     height: calc(100% - 120px);
-    display: inline-flex;
+
+    padding: 20px 0;
+
+    display: inline-block;
 }
 
-.chat-left {
+#chat-recent-panel {
     width: 256px;
     height: calc(100% - 100px);
-    margin: 0 10px;
-    overflow-y: auto;
-}
 
-.chat-right {
-    width: calc(100% - 256px - 40px);
-    height: calc(100% - 80px);
-    margin-right: 10px;
+    display: inline-block;
+
+    overflow-y: auto;
 }
 
 /* Chat history. */
-.chat-history {
+#chat-history {
     overflow-y: auto;
     overflow-x: hidden;
-    height: 100%;
+
+    width: calc(100% - 256px - 75px);
+    height: calc(100% - 80px);
+
     padding: 10px;
 
+    display: inline-block;
+
     word-wrap: break-word;
 }
 
@@ -36,7 +40,13 @@
 .chat-message {
     width: 100%;
     min-height: 40px;
-    padding-top: 10px;
+    padding: 10px 0;
+    clear: both;
+}
+
+.chat-message::after {
+    content: '';
+    display: table;
     clear: both;
 }
 
@@ -63,7 +73,7 @@
 /* Chat reply field */
 
 .chat-field {
-    width: 100%;
+    width: calc(100% - 10px);
     display: table;
 }
 

website/public/styles/main.css

@@ -242,3 +242,23 @@ div[data-title]:hover:after {
     line-height: normal;
     font-family: Arial, sans-serif;
 }
+
+.friend {
+
+}
+
+
+.friend-item, .group-item {
+    cursor: pointer;
+    transition-duration: 250ms;
+}
+
+.friend-item:hover, .group-item:hover {
+    background: #FBC02D;
+    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+}
+
+.friend-name {
+    display: inline-block;
+    vertical-align: middle;
+}

website/public/styles/menu.css

@@ -34,16 +34,6 @@
     cursor: pointer;
 }
 
-.friend-item, .group-item {
-    cursor: pointer;
-    transition-duration: 250ms;
-}
-
-.friend-item:hover, .group-item:hover {
-    background: #FBC02D;
-    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
-}
-
 .menu button {
     background: none;
     color: inherit;