BOD-14 WIP. CSS issues present with 2 way texting, but working live.

client/src/components/chat-conversation/chat-conversation.styles.scss

@@ -1,6 +1,77 @@
+.chat-overlay-wrapper {
+  width: 95vw;
+}
+.chat-overlay-scroller {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  vertical-align: bottom;
+}
+.chat-overlay {
+  margin: 0px 12px;
+  display: inline-block;
+}
+.chat-overlay-open {
+  width: 400px;
+  height: 33vh;
+  display: flex;
+  flex-flow: column;
+}
+.chat-overlay-closed {
+  display: flex;
+  justify-content: space-between;
+  vertical-align: middle;
+  width: 150px;
+  cursor: pointer;
+}
+
+// .chat-messages {
+//   height: 80%;
+//   overflow-x: hidden;
+//   overflow-y: scroll;
+//   flex-grow: 1;
+
+//   ul {
+//     list-style: none;
+//     margin: 0;
+//     padding: 0;
+//   }
+
+//   ul li {
+//     display: inline-block;
+//     clear: both;
+//     padding: 3px 10px;
+//     border-radius: 30px;
+//     margin-bottom: 2px;
+//   }
+
+//   .inbound {
+//     background: #eee;
+//     float: left;
+//   }
+
+//   .outbound {
+//     float: right;
+//     background: #0084ff;
+//     color: #fff;
+//   }
+
+//   .inbound + .outbound {
+//     border-bottom-right-radius: 5px;
+//   }
+
+//   .outbound + .outbound {
+//     border-top-right-radius: 5px;
+//     border-bottom-right-radius: 5px;
+//   }
+
+//   .outbound:last-of-type {
+//     border-bottom-right-radius: 30px;
+//   }
+// }
+
 .messages {
   height: auto;
-  min-height: calc(100% - 93px);
+  min-height: calc(100% - 10px);
   max-height: calc(100% - 93px);
   overflow-y: scroll;
   overflow-x: hidden;
@@ -21,7 +92,7 @@
   display: inline-block;
   clear: both;
   //float: left;
-  margin: 5px 15px 5px 15px;
+  margin: 5px;
   width: calc(100% - 25px);
   font-size: 0.9em;
 }