truncate to use page path editing

apps/app/src/components/PageHeader/PagePathHeader.module.scss

@@ -1,4 +1,5 @@
 .page-path-header :global {
+  max-width: calc(100vw - 650px);
   input {
     min-width: 20px;
     min-height: unset;

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

@@ -39,7 +39,7 @@ export const PagePathHeader: FC<Props> = memo((props: Props) => {
   const [isHover, setHover] = useState(false);
   const [editingParentPagePath, setEditingParentPagePath] = useState(parentPagePath);
 
-  const [isIconHidden, setIsIconHidden] = useState(false);
+  // const [isIconHidden, setIsIconHidden] = useState(false);
 
   const { data: PageSelectModalData, open: openPageSelectModal } = usePageSelectModal();
   const isOpened = PageSelectModalData?.isOpened ?? false;
@@ -75,28 +75,20 @@ export const PagePathHeader: FC<Props> = memo((props: Props) => {
     setRenameInputShown(true);
   }, [parentPagePath]);
 
-  useEffect(() => {
-    const areaElem = document.getElementById('grw-page-path-header-container');
-    const linkElem = document.getElementById('grw-page-path-hierarchical-link');
+  // useEffect(() => {
+  //   const areaElem = document.getElementById('grw-page-path-header-container');
+  //   const linkElem = document.getElementById('grw-page-path-hierarchical-link');
 
-    const areaElemWidth = areaElem?.offsetWidth;
-    const linkElemWidth = linkElem?.offsetWidth;
+  //   const areaElemWidth = areaElem?.offsetWidth;
+  //   const linkElemWidth = linkElem?.offsetWidth;
 
-    if (areaElemWidth && linkElemWidth) {
-      setIsIconHidden(linkElemWidth > areaElemWidth);
-    }
-    else {
-      setIsIconHidden(false);
-    }
-  }, [currentPage]);
-
-  const subNavElem = document.getElementById('grw-contextual-sub-nav');
-
-  const subNavElemWidth = useMemo(() => (subNavElem?.offsetWidth ?? 0), []);
-
-  const styles: CSSProperties | undefined = isIconHidden ? { direction: 'rtl' } : undefined;
-
-  const pagePathHeaderWidth = `calc(100% - ${subNavElemWidth}px)`;
+  //   if (areaElemWidth && linkElemWidth) {
+  //     setIsIconHidden(linkElemWidth > areaElemWidth);
+  //   }
+  //   else {
+  //     setIsIconHidden(false);
+  //   }
+  // }, [currentPage]);
 
   if (dPagePath.isRoot) {
     return <></>;
@@ -108,12 +100,10 @@ export const PagePathHeader: FC<Props> = memo((props: Props) => {
       className={`d-flex ${moduleClass} small position-relative`}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
-      style={{ width: pagePathHeaderWidth }}
     >
       <div
         id="grw-page-path-header-container"
-        className="me-2"
-        style={{ minWidth: 0 }}
+        className="me-2 d-inline-block overflow-hidden"
       >
         { isRenameInputShown && (
           <div className="position-absolute w-100">
@@ -131,11 +121,10 @@ export const PagePathHeader: FC<Props> = memo((props: Props) => {
         ) }
         <div
           className={`${isRenameInputShown ? 'invisible' : ''} text-truncate`}
-          style={styles}
         >
           <PagePathHierarchicalLink
             linkedPagePath={linkedPagePath}
-            isIconHidden={isIconHidden}
+            // isIconHidden={isIconHidden}
           />
         </div>
       </div>

apps/app/src/components/PageHeader/PageTitleHeader.module.scss

@@ -1,4 +1,5 @@
 .page-title-header :global {
+  max-width: calc(100vw - 650px);
   input {
     min-width: 20px;
     min-height: unset;

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

@@ -70,12 +70,11 @@ export const PageTitleHeader: FC<Props> = (props) => {
 
 
   return (
-    <div className={`d-flex align-items-center ${moduleClass} ${props.className ?? ''}`}>
-      <div className="me-1">
+    <div className={`d-flex ${moduleClass} ${props.className ?? ''} position-relative`}>
+      <div className="me-1 d-inline-block overflow-hidden">
         { isRenameInputShown && (
-          <div className="position-absolute">
+          <div className="position-absolute w-100">
             <ClosableTextInput
-              useAutosizeInput
               value={editedPageTitle}
               placeholder={t('Input page name')}
               inputClassName="fs-4"
@@ -87,7 +86,7 @@ export const PageTitleHeader: FC<Props> = (props) => {
             />
           </div>
         ) }
-        <h1 className={`mb-0 fs-4 ${isRenameInputShown ? 'invisible' : ''}`} onClick={onClickPageTitle}>
+        <h1 className={`mb-0 fs-4 ${isRenameInputShown ? 'invisible' : ''} text-truncate`} onClick={onClickPageTitle}>
           {pageTitle}
         </h1>
       </div>