Question page printing improvements

src/app/components/elements/NavigationLinks.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import {PageNavigation} from "../../services";
 import {Link} from "react-router-dom";
 import {Markup} from "./markup";
+import classNames from "classnames";
 
 export const NavigationLinks = ({navigation}: {navigation: PageNavigation}) => {
     const backToCollectionLink = navigation.backToCollection && <div className="w-50 w-md-auto mb-4">
@@ -44,11 +45,14 @@ export const NavigationLinks = ({navigation}: {navigation: PageNavigation}) => {
         <div className="section-divider my-4"/>
         <div className="d-flex justify-content-between align-items-stretch no-print">
             {previousItemLink}
-            <span className={threeLinks ? "d-none d-xl-block" : ""}>{backToCollectionLink}</span>
+            <span className={classNames({"d-none d-xl-block": threeLinks})}>{backToCollectionLink}</span>
             {nextItemLink}
         </div>
-        {threeLinks && <div className="d-xl-none">
+        <div className={classNames("no-print", {"d-block d-xl-none": threeLinks, "d-none": !threeLinks})}>
             {backToCollectionLink}
-        </div>}
+        </div>
+        <div className="only-print">
+            {backToCollectionLink}
+        </div>
     </>;
 };

src/app/components/elements/TitleAndBreadcrumb.tsx

@@ -65,7 +65,7 @@ export const TitleAndBreadcrumb = ({children, breadcrumbTitleOverride, currentPa
             collectionType={collectionType}
         />
         {children}
-        <div tabIndex={-1} className={classNames("d-sm-flex", {"py-2": isPhy, "mb-2": isAda})}>
+        <div tabIndex={-1} className={classNames("title-container d-sm-flex", {"py-2": isPhy, "mb-2": isAda})}>
             <PageTitle
                 subTitle={subTitle} disallowLaTeX={disallowLaTeX}
                 currentPageTitle={currentPageTitle} displayTitleOverride={displayTitleOverride}

src/scss/phy/accordions.scss

@@ -21,6 +21,11 @@
     }
   }
 
+  @include only-print {
+    border-color: var(--nav-primary);
+    border-radius: 8px;
+  }
+
   .accordion-header {
     background: rgba(white, 1);
     border-radius: 8px;

src/scss/phy/breadcrumbs.scss

@@ -21,10 +21,18 @@
     }
 
     .breadcrumb-item + .breadcrumb-item::before, .breadcrumb-item:last-child::after {
-        @include pseudo-icon('/assets/common/icons/chevron-right.svg', 16px, 16px, 100%);
-        background-color: $color-neutral-white;
+        @include no-print {
+            @include pseudo-icon('/assets/common/icons/chevron-right.svg', 16px, 16px, 100%);
+            background-color: $color-neutral-white;
+        }
+
+        @include only-print {
+            content: ">";
+            color: black;
+        }
+
         padding: 0;
-        margin-right: 0.5rem;
+        margin-right: $breadcrumb-item-padding-x;
     }
 
     .breadcrumb-item:last-child::after {

src/scss/phy/page-title.scss

@@ -69,14 +69,27 @@
     }
 
     @include only-print {
-        .bread:has(+ h1#main-heading) {
-            + h1#main-heading {
+        background-color: transparent;
+
+        .title-graphics {
+            display: none;
+        }
+
+        h1#main-heading {
+            color: black;
+        }
+
+        // If there is a breadcrumb and a title, hide the title - otherwise hide the breadcrumb
+        .bread:has(+ .title-container) {
+            + .title-container {
                 display: none !important;
             }
-        }
 
-        .bread:not(:has(+ h1#main-heading)) {
-            display: none !important;
+            .breadcrumb-item a {
+                color: black;
+            }
+
+            background-color: transparent;
         }
     }
 }