Styling fixes to allow for printing of pages.

client/src/components/chat-affix/chat-affix.container.jsx

@@ -1,17 +1,15 @@
 import { useSubscription } from "@apollo/client";
 import React from "react";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
 import { CONVERSATION_LIST_SUBSCRIPTION } from "../../graphql/conversations.queries";
+import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import ChatAffixComponent from "./chat-affix.component";
-import { Affix } from "antd";
 import "./chat-affix.styles.scss";
 
-import { connect } from "react-redux";
-import { createStructuredSelector } from "reselect";
-import { selectBodyshop } from "../../redux/user/user.selectors";
-import { selectChatVisible } from "../../redux/messaging/messaging.selectors";
-
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
   chatVisible: selectChatVisible,
@@ -31,22 +29,20 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
   if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
 
   return (
-    <Affix className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      <div>
-        {bodyshop && bodyshop.messagingservicesid ? (
-          <ChatAffixComponent
-            conversationList={(data && data.conversations) || []}
-            unreadCount={
-              (data &&
-                data.conversations.reduce((acc, val) => {
-                  return (acc = acc + val.messages_aggregate.aggregate.count);
-                }, 0)) ||
-              0
-            }
-          />
-        ) : null}
-      </div>
-    </Affix>
+    <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
+      {bodyshop && bodyshop.messagingservicesid ? (
+        <ChatAffixComponent
+          conversationList={(data && data.conversations) || []}
+          unreadCount={
+            (data &&
+              data.conversations.reduce((acc, val) => {
+                return (acc = acc + val.messages_aggregate.aggregate.count);
+              }, 0)) ||
+            0
+          }
+        />
+      ) : null}
+    </div>
   );
 }
 export default connect(mapStateToProps, null)(ChatAffixContainer);

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

@@ -1,6 +1,11 @@
 .chat-affix {
-  position: absolute;
+  position: fixed;
+  left: 2vw;
   bottom: 2vh;
+  z-index: 999;
+  -webkit-box-shadow: 0px 0px 2px 0px rgba(69, 69, 69, 1);
+  -moz-box-shadow: 0px 0px 2px 0px rgba(69, 69, 69, 1);
+  box-shadow: 0px 0px 2px 0px rgba(69, 69, 69, 1);
 }
 
 .chat-affix-open {

client/src/components/header/header.component.jsx

@@ -1,5 +1,4 @@
 import Icon, {
-  FileAddOutlined,
   BankFilled,
   BarChartOutlined,
   CarFilled,
@@ -9,6 +8,7 @@ import Icon, {
   ExportOutlined,
   FieldTimeOutlined,
   FileAddFilled,
+  FileAddOutlined,
   FileFilled,
   GlobalOutlined,
   HomeFilled,
@@ -85,7 +85,6 @@ function Header({
         mode="horizontal"
         //theme="light"
         theme={"dark"}
-        style={{ flex: "auto" }}
         selectedKeys={[selectedHeader]}
         onClick={handleMenuClick}
         subMenuCloseDelay={0.3}
@@ -263,7 +262,6 @@ function Header({
             {t("menus.header.temporarydocs")}
           </Link>
         </Menu.Item>
-
         <Menu.SubMenu
           key="shopsubmenu"
           title={t("menus.header.shop")}
@@ -300,7 +298,6 @@ function Header({
           </Menu.Item>
         </Menu.SubMenu>
         <Menu.SubMenu
-          style={{ float: "right" }}
           key="user"
           title={
             currentUser.displayName ||
@@ -354,12 +351,7 @@ function Header({
             </Menu.Item>
           </Menu.SubMenu>
         </Menu.SubMenu>
-
-        <Menu.SubMenu
-          key="recent"
-          style={{ float: "right" }}
-          title={<ClockCircleFilled />}
-        >
+        <Menu.SubMenu key="recent" title={<ClockCircleFilled />}>
           {recentItems.map((i, idx) => (
             <Menu.Item key={idx}>
               <Link to={i.url}>{i.label}</Link>