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,8 +29,7 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
   if (!bodyshop || !bodyshop.messagingservicesid) return <></>;
 
   return (
-    <Affix className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
+    <div className={`chat-affix ${chatVisible ? "chat-affix-open" : ""}`}>
-      <div>
       {bodyshop && bodyshop.messagingservicesid ? (
         <ChatAffixComponent
           conversationList={(data && data.conversations) || []}
@@ -46,7 +43,6 @@ export function ChatAffixContainer({ bodyshop, chatVisible }) {
         />
       ) : null}
     </div>
-    </Affix>
   );
 }
 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" title={<ClockCircleFilled />}>
-        <Menu.SubMenu
-          key="recent"
-          style={{ float: "right" }}
-          title={<ClockCircleFilled />}
-        >
           {recentItems.map((i, idx) => (
             <Menu.Item key={idx}>
               <Link to={i.url}>{i.label}</Link>

client/src/pages/manage/manage.page.component.jsx

@@ -378,6 +378,8 @@ export function Manage({ match, conflict, bodyshop }) {
   else PageContent = AppRouteTable;
 
   return (
+    <>
+      <ChatAffixContainer />
       <Layout className="layout-container">
         <HeaderContainer />
 
@@ -385,7 +387,6 @@ export function Manage({ match, conflict, bodyshop }) {
           <FcmNotification />
           <PartnerPingComponent />
           <ErrorBoundary>{PageContent}</ErrorBoundary>
-        <ChatAffixContainer />
           <BackTop />
           <Footer>
             <div
@@ -406,13 +407,14 @@ export function Manage({ match, conflict, bodyshop }) {
                 <div id="noticeable-widget" style={{ marginLeft: "1rem" }} />
               </div>
               <Link to="/about" target="_blank" style={{ color: "#ccc" }}>
-              Disclaimer
+                Disclaimer & Notices
               </Link>
               <JiraSupportComponent />
             </div>
           </Footer>
         </Content>
       </Layout>
+    </>
   );
 }
 export default connect(mapStateToProps, null)(Manage);

client/src/pages/manage/manage.page.styles.scss

@@ -3,6 +3,6 @@
 }
 
 .layout-container {
-  height: 100vh;
+  // height: 100vh;
-  overflow-y: auto;
+  // overflow-y: auto;
 }