"before merge"

website/styles/chat.css

@@ -1,38 +1,44 @@
+/* Overall chat-screen */
 .chat {
     text-align: center;
-    padding-top: 15px;
+    padding: 15px 0;
+    width: 100%
 }
 
-.chat-history {
-    /*border: solid #845663;*/
-    width: 80%;
-    height: 500px;
-    margin: auto auto;
+.chat-left {
+    float: left;
+    width: 20%;
+    height: 100%;
+    margin-left: 10px;
+    margin-right: 10px;
+
+}
+.chat-list, .chat-history {
+    border-radius: 20px;
+    width: 100%;
     background-color: white;
+}
+
+
+/* List of chats. */
+.chat-list {
+    height: 600px;
+    overflow-y: auto;
+    padding: 10px;
+}
+
+.chat-right {
+    width: 75%;
     vertical-align: bottom;
-    overflow-y: scroll;
-    padding: 5px 0;
-    border-radius: 10px;
+    float: right;
+    margin-right: 10px;
 }
 
-.chat-field {
-    padding: 15px;
-}
-
-.chat-field input {
-    border-radius: 8px;
-}
-
-.chat-field input[type="text"] {
-    width: calc(75% - 60px);
-
-}
-
-.chat-field input[type="submit"] {
-    width: 60px;
-    background-color: #845663;
-    color: white;
-    padding: 5px;
+/* Chat history. */
+.chat-history {
+    height: 600px;
+    overflow-y: auto;
+    padding-bottom: 10px;
 }
 
 .chat-message {
@@ -51,7 +57,6 @@
 
 .chat-message-self {
     float: right;
-
     margin-right: 10px;
     background-color: darkgreen;
     color: white;
@@ -61,4 +66,25 @@
     float: left;
     margin-left: 10px;
     background-color: aquamarine;
+}
+
+/* Chat reply field */
+
+.chat-field {
+    padding: 15px;
+}
+
+.chat-field input {
+    border-radius: 8px;
+}
+
+.chat-field input[type="text"] {
+    width: calc(100% - 80px);
+}
+
+.chat-field input[type="submit"] {
+    width: 60px;
+    background-color: #845663;
+    color: white;
+    padding: 5px;
 }