Revert "Add conditional branching by element size"

This reverts commit 64851961459cf896f3aed538ceadc24bdf5cfe7b.

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

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

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

@@ -1,7 +1,5 @@
-import {
-  useState, useEffect, useCallback,
-} from 'react';
-import type { CSSProperties, FC } from 'react';
+import { useState, useEffect, useCallback } from 'react';
+import type { FC } from 'react';
 
 import type { IPagePopulatedToShowRevision } from '@growi/core';
 import { DevidedPagePath } from '@growi/core/dist/models';
@@ -89,19 +87,6 @@ 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 <></>;
@@ -113,13 +98,8 @@ export const PagePathHeader: FC<Props> = (props) => {
       className={`d-flex ${moduleClass} small`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
-      style={{ width: pagePathHeaderWidth }}
     >
-      <div
-        id="grw-page-path-header-area"
-        className="me-2"
-        style={{ minWidth: 0 }}
-      >
+      <div className="me-2">
         { isRenameInputShown && (
           <div className="position-absolute">
             <ClosableTextInput
@@ -134,14 +114,8 @@ export const PagePathHeader: FC<Props> = (props) => {
             />
           </div>
         ) }
-        <div
-          className={`${isRenameInputShown ? 'invisible' : ''} text-truncate`}
-          style={styles}
-        >
-          <PagePathHierarchicalLink
-            linkedPagePath={linkedPagePath}
-            isIconHidden={linkElemWidth > areaElemWidth}
-          />
+        <div className={`${isRenameInputShown ? 'invisible' : ''}`}>
+          <PagePathHierarchicalLink linkedPagePath={linkedPagePath} />
         </div>
       </div>