Fixed up some messaging layout issues. BOD-78

client/src/components/chat-popup/chat-popup.component.jsx

@@ -1,5 +1,5 @@
 import { ShrinkOutlined } from "@ant-design/icons";
-import { Col, Row } from "antd";
+import { Col, Row, Typography } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
@@ -25,15 +25,13 @@ export function ChatPopupComponent({
   const { t } = useTranslation();
   return (
     <div className="chat-popup">
-      <div style={{ overflow: "auto" }}>
-        <strong style={{ float: "left" }}>
-          {t("messaging.labels.messaging")}
-        </strong>
-        <ShrinkOutlined
-          onClick={() => toggleChatVisible()}
-          style={{ float: "right" }}
-        />
-      </div>
+      <Typography.Title level={4}>
+        {t("messaging.labels.messaging")}
+      </Typography.Title>
+      <ShrinkOutlined
+        onClick={() => toggleChatVisible()}
+        style={{ position: "absolute", right: ".5rem", top: ".5rem" }}
+      />
 
       <Row className="chat-popup-content">
         <Col span={8}>

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

@@ -1,8 +1,11 @@
 .chat-popup {
   width: 40vw;
   height: 50vh;
+  display: flex;
+  flex-direction: column;
 }
 
 .chat-popup-content {
-  height: 100%;
+  //height: 50vh;
+  flex: 1;
 }