Styling changes for messaging.

client/src/components/chat-messages-list/chat-message-list.component.jsx

@@ -1,7 +1,7 @@
 import { CheckCircleOutlined, CheckOutlined } from "@ant-design/icons";
 import React, { useEffect, useRef } from "react";
+import { AutoSizer, CellMeasurer, CellMeasurerCache, List } from "react-virtualized";
 import "./chat-message-list.styles.scss";
-import { List, CellMeasurer, CellMeasurerCache } from "react-virtualized";
 
 export default function ChatMessageListComponent({ messages }) {
   const virtualizedListRef = useRef(null);
@@ -29,7 +29,8 @@ export default function ChatMessageListComponent({ messages }) {
           <li
             ref={registerChild}
             style={style}
-            className={`${messages[index].isoutbound ? "replies" : "sent"}`}>
+            className={`${messages[index].isoutbound ? "replies" : "sent"}`}
+          >
             <p onLoad={measure}>
               {messages[index].text}
               {StatusRender(messages[index].status)}
@@ -41,16 +42,20 @@ export default function ChatMessageListComponent({ messages }) {
   };
 
   return (
-    <div className='messages'>
+    <div className="messages">
       <ul>
-        <List
-          ref={virtualizedListRef}
-          width={300}
-          height={300}
-          rowHeight={_cache.rowHeight}
-          rowRenderer={_rowRenderer}
-          rowCount={messages.length}
-        />
+        <AutoSizer>
+          {({ height, width }) => (
+            <List
+              ref={virtualizedListRef}
+              width={width}
+              height={height}
+              rowHeight={_cache.rowHeight}
+              rowRenderer={_rowRenderer}
+              rowCount={messages.length}
+            />
+          )}
+        </AutoSizer>
       </ul>
     </div>
   );

client/src/components/chat-messages-list/chat-message-list.styles.scss

@@ -1,10 +1,13 @@
-// .messages {
-//   height: 300px;
-//   min-height: calc(100% - 10px);
-//   max-height: calc(100% - 93px);
-//   overflow-y: scroll;
-//   overflow-x: hidden;
-// }
+.messages {
+  //flex-grow: 1;
+  flex: 1;
+  //   height: 100%;
+  //   min-height: calc(100% - 10px);
+  //   max-height: calc(100% - 93px);
+  //   // overflow-y: scroll;
+  //   // overflow-x: hidden;
+}
+
 // @media screen and (max-width: 735px) {
 //   .messages {
 //     max-height: calc(100% - 105px);
@@ -17,13 +20,16 @@
 // .messages::-webkit-scrollbar-thumb {
 //   background-color: rgba(0, 0, 0, 0.3);
 // }
+.messages ul {
+  height: 100%;
+}
 .messages ul li {
   display: inline-block;
-  clear: both;
+  // clear: both;
   //float: left;
-  margin: 5px;
-  width: calc(100% - 25px);
-  font-size: 0.9em;
+  // margin: 5px;
+  //width: calc(100% - 25px);
+  // font-size: 0.9em;
 }
 .messages ul li:nth-last-child(1) {
   margin-bottom: 20px;