Implementation of truncate in PagePath

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

@@ -13,6 +13,7 @@ type PagePathHierarchicalLinkProps = {
   linkedPagePathByHtml?: LinkedPagePath,
   basePath?: string,
   isInTrash?: boolean,
+  isIconHidden?: boolean,
 
   // !!INTERNAL USE ONLY!!
   isInnerElem?: boolean,
@@ -23,11 +24,13 @@ export const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkPro
     linkedPagePath, linkedPagePathByHtml, basePath, isInTrash, isInnerElem,
   } = props;
 
+  const isIconHidden = props.isIconHidden ?? false;
+
   // eslint-disable-next-line react/prop-types
   const RootElm = useCallback(({ children }) => {
     return isInnerElem
       ? <>{children}</>
-      : <span className="text-break">{children}</span>;
+      : <span className="text-break" id="page-path-hierarchical-link">{children}</span>;
   }, [isInnerElem]);
 
   // render root element
@@ -36,6 +39,10 @@ export const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkPro
       return <></>;
     }
 
+    if (isIconHidden) {
+      return <></>;
+    }
+
     return isInTrash
       ? (
         <RootElm>
@@ -77,6 +84,7 @@ export const PagePathHierarchicalLink = memo((props: PagePathHierarchicalLinkPro
           basePath={basePath}
           isInTrash={isInTrash || linkedPagePath.isInTrash}
           isInnerElem
+          isIconHidden={isIconHidden}
         />
       ) }
       { isSeparatorRequired && (

apps/app/src/components/PageHeader/PagePathHeader.tsx

@@ -1,5 +1,7 @@
-import { useState, useEffect, useCallback } from 'react';
-import type { FC } from 'react';
+import {
+  useState, useEffect, useCallback,
+} from 'react';
+import type { CSSProperties, FC } from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { DevidedPagePath } from '@growi/core/dist/models';
@@ -87,6 +89,19 @@ export const PagePathHeader: FC<Props> = (props) => {
     };
   }, [clickOutSideHandler]);
 
+  const linkElem = document.getElementById('page-path-hierarchical-link');
+  const areaElem = document.getElementById('grw-page-path-header-area');
+
+  const linkElemWidth = linkElem?.offsetWidth ?? 0;
+  const areaElemWidth = areaElem?.offsetWidth ?? 0;
+
+  const styles: CSSProperties | undefined = linkElemWidth > areaElemWidth ? { direction: 'rtl' } : undefined;
+
+  const subNavElem = document.getElementById('grw-contextual-sub-nav');
+
+  const subNavElemWidth = subNavElem?.offsetWidth ?? 0;
+
+  const pagePathHeaderWidth = `calc(100% - ${subNavElemWidth}px)`;
 
   if (dPagePath.isRoot) {
     return <></>;
@@ -95,11 +110,16 @@ export const PagePathHeader: FC<Props> = (props) => {
   return (
     <div
       id="page-path-header"
-      className={`d-flex col-6 small ${moduleClass}`}
+      className={`d-flex ${moduleClass} small`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
+      style={{ width: pagePathHeaderWidth }}
     >
-      <div className="me-2">
+      <div
+        id="grw-page-path-header-area"
+        className="me-2"
+        style={{ minWidth: 0 }}
+      >
         { isRenameInputShown && (
           <div className="position-absolute">
             <ClosableTextInput
@@ -115,15 +135,17 @@ export const PagePathHeader: FC<Props> = (props) => {
           </div>
         ) }
         <div
-          className={`${isRenameInputShown ? 'invisible' : ''} ${styles['ellipsize-left']}`}
-          style={{ direction: 'rtl' }}
+          className={`${isRenameInputShown ? 'invisible' : ''} text-truncate`}
+          style={styles}
         >
-          <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />
+          <PagePathHierarchicalLink
+            linkedPagePath={linkedPagePath}
+            isIconHidden={linkElemWidth > areaElemWidth}
+          />
         </div>
       </div>
 
-      {/* <div className={`page-path-header-buttons d-flex align-items-center ${isHover && !isRenameInputShown ? '' : 'invisible'}`}> */}
-      <div className="page-path-header-buttons d-flex align-items-center">
+      <div className={`page-path-header-buttons d-flex align-items-center ${isHover && !isRenameInputShown ? '' : 'invisible'}`}>
         <button
           type="button"
           className="btn btn-outline-neutral-secondary me-2 d-flex align-items-center justify-content-center"