truncateBreadcrumbName util

src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/ActiveBreadcrumbsItem/ActiveBreadcrumbsItem.tsx

@@ -1,8 +1,10 @@
 import React, { FC, useRef } from "react";
 import { ButtonIcon, UserAvatar } from "@/shared/components";
+import { useIsPhoneView } from "@/shared/hooks/viewport";
 import { RightArrowThinIcon } from "@/shared/icons";
 import { ContextMenuRef } from "@/shared/ui-kit";
 import { ProjectsStateItem } from "@/store/states";
+import { truncateBreadcrumbName } from "../../utils";
 import { BreadcrumbsMenu } from "../BreadcrumbsMenu";
 import styles from "./ActiveBreadcrumbsItem.module.scss";
 
@@ -26,6 +28,7 @@ const ActiveBreadcrumbsItem: FC<ActiveBreadcrumbsItemProps> = (props) => {
   } = props;
   const itemsButtonRef = useRef<HTMLButtonElement>(null);
   const contextMenuRef = useRef<ContextMenuRef>(null);
+  const isPhoneView = useIsPhoneView();
 
   const handleButtonClick = () => {
     if (itemsButtonRef.current) {
@@ -44,7 +47,9 @@ const ActiveBreadcrumbsItem: FC<ActiveBreadcrumbsItemProps> = (props) => {
           userName={name}
         />
       )}
-      <span className={styles.name}>{name}</span>
+      <span className={styles.name}>
+        {isPhoneView ? truncateBreadcrumbName(name) : name}
+      </span>
       {(items.length > 0 || commonIdToAddProject) && withMenu && (
         <ButtonIcon
           ref={itemsButtonRef}

src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/components/BreadcrumbsItem/BreadcrumbsItem.tsx

@@ -1,10 +1,10 @@
 import React, { FC, useRef } from "react";
 import { useHistory } from "react-router";
-import { truncate } from "lodash";
 import { useRoutesContext } from "@/shared/contexts";
 import { useIsPhoneView } from "@/shared/hooks/viewport";
 import { ContextMenuRef } from "@/shared/ui-kit";
 import { ProjectsStateItem } from "@/store/states";
+import { truncateBreadcrumbName } from "../../utils";
 import { BreadcrumbsMenu } from "../BreadcrumbsMenu";
 import styles from "./BreadcrumbsItem.module.scss";
 
@@ -18,8 +18,6 @@ export interface BreadcrumbsItemProps {
   onClick?: () => void;
 }
 
-const MOBILE_MAXIMUM_ITEM_LENGTH = 13;
-
 const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
   const {
     activeItem,
@@ -52,10 +50,7 @@ const BreadcrumbsItem: FC<BreadcrumbsItemProps> = (props) => {
     <li ref={containerRef}>
       <button className={styles.button} onClick={handleButtonClick}>
         {isPhoneView
-          ? truncate(activeItem.name, {
-              length: MOBILE_MAXIMUM_ITEM_LENGTH,
-              omission: "...",
-            })
+          ? truncateBreadcrumbName(activeItem.name)
           : activeItem.name}
       </button>
       {withMenu && (

src/shared/layouts/MultipleSpacesLayout/components/Header/components/Breadcrumbs/utils.ts

@@ -0,0 +1,11 @@
+import { truncate } from "lodash";
+
+const OMISSION = "...";
+const MOBILE_MAXIMUM_ITEM_LENGTH = 10 + OMISSION.length;
+
+export const truncateBreadcrumbName = (itemName: string) => {
+  return truncate(itemName, {
+    length: MOBILE_MAXIMUM_ITEM_LENGTH,
+    omission: OMISSION,
+  });
+};