Merge pull request #8566 from weseek/imprv/140361-141683-page-titles-not-breaking-lines-in-display-area

imprv: Fix page titles not breaking lines in page view

apps/app/src/components/Common/PagePathNav/PagePathNav.module.scss

@@ -20,6 +20,15 @@
       font-size: 1.75rem !important;
     }
   }
+  // avoid sticky-top nav to turnate page path
+  .is-collapse-with-top {
+    @include bs.media-breakpoint-down(md) {
+      max-width: calc(100% - 350px);
+    }
+    @include bs.media-breakpoint-up(md) {
+      max-width: calc(100% - 500px);
+    }
+  }
 }
 
 .grw-page-path-nav :global {

apps/app/src/components/Common/PagePathNav/PagePathNav.tsx

@@ -85,7 +85,7 @@ export const PagePathNav: FC<Props> = (props: Props) => {
     <div>
       <span className={formerLinkClassName}>{formerLink}</span>
       <div className="d-flex align-items-center">
-        <h1 className={`m-0 text-truncate ${latterLinkClassName}`}>
+        <h1 className={`m-0 ${latterLinkClassName}`}>
           {latterLink}
         </h1>
         { pageId != null && !isNotFound && (
@@ -117,8 +117,8 @@ export const PagePathNavSticky = (props: PagePathNavStickyProps): JSX.Element =>
           // Controlling pointer-events
           //  2. enable pointer-events with 'pe-auto' only against the children
           //      which width is minimized by 'd-inline-block'
-          <div className="d-inline-block pe-auto">
-            <PagePathNav {...props} isCollapseParents={isCollapseParents} latterLinkClassName={isCollapseParents ? 'fs-3' : 'fs-2'} />
+          <div className={`d-inline-block pe-auto ${isCollapseParents ? 'is-collapse-with-top' : ''}`}>
+            <PagePathNav {...props} isCollapseParents={isCollapseParents} latterLinkClassName={isCollapseParents ? 'fs-3  text-truncate' : 'fs-2'} />
           </div>
         );
       }}

apps/app/src/components/SearchPage/SearchResultContent.tsx

@@ -219,7 +219,7 @@ export const SearchResultContent: FC<Props> = (props: Props) => {
       <RightComponent />
 
       <div className="container-lg grw-container-convertible pt-2 pb-2">
-        <PagePathNav pageId={page._id} pagePath={page.path} formerLinkClassName="small" latterLinkClassName="fs-3" />
+        <PagePathNav pageId={page._id} pagePath={page.path} formerLinkClassName="small" latterLinkClassName="fs-3 text-truncate" />
       </div>
 
       <div