set width for page path sticky

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

@@ -16,6 +16,7 @@
 
   .sticky-inner-wrapper {
     z-index: bs.$zindex-sticky;
+
   }
 
   // set smaller font-size when sticky
@@ -24,6 +25,15 @@
       font-size: 1.75rem !important;
     }
   }
+  // avoid sticky-top nav to turnate page path
+  .in-collapse-with-top {
+    @include bs.media-breakpoint-up(md) {
+      max-width: calc(100% - (500px - (100vw - 100%) / 2));
+    }
+    @include bs.media-breakpoint-down(md) {
+      max-width: calc(100% - 350px);
+    }
+  }
 }
 
 .grw-page-path-nav :global {

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

@@ -116,14 +116,14 @@ export const PagePathNavSticky = (props: PagePathNavStickyProps): JSX.Element =>
   return (
     // Controlling pointer-events
     //  1. disable pointer-events with 'pe-none'
-    <Sticky className={`${styles['grw-page-path-nav-sticky']} mb-4`} innerClass="mt-1 pe-none" innerActiveClass="active">
+    <Sticky className={`${styles['grw-page-path-nav-sticky']} mb-4`} innerClass="mt-1 pe-none d-flex" innerActiveClass="active">
       {({ status }: { status: boolean }) => {
         const isCollapseParents = status === Sticky.STATUS_FIXED;
         return (
           // 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">
+          <div className={`d-inline-block pe-auto ${isCollapseParents ? 'in-collapse-with-top' : ''}`}>
             <PagePathNav {...props} isCollapseParents={isCollapseParents} latterLinkClassName={isCollapseParents ? 'fs-3  text-truncate' : 'fs-2'} />
           </div>
         );