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>
   );