cut common paths in tooltip

src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.module.scss

@@ -1,4 +1,5 @@
 @import "../../../../../../constants";
+@import "../../../../../../styles/sizes";
 
 .linkIcon {
   width: 1rem;
@@ -11,9 +12,13 @@
 
 .tooltipContent {
   max-width: 30rem;
-  z-index: 3;
+  z-index: 1;
   display: flex;
   flex-direction: column;
+
+  @include tablet {
+    max-width: 100vw;
+  }
 }
 
 .contentTitle {
@@ -29,7 +34,6 @@
 
 .link {
   width: 100%;
-  margin-bottom: 0.625rem;
   display: flex;
   align-items: center;
   font-size: 0.875rem;
@@ -38,10 +42,9 @@
   &:hover {
     color: $c-pink-primary;
   }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
+}
+.linkWithBottomMargin {
+  margin-bottom: 0.625rem;
 }
 
 .linkLeft,

src/pages/common/components/FeedCard/components/LinkedItemMark/LinkedItemMark.tsx

@@ -1,21 +1,17 @@
-import React, {
-  FC,
-  MouseEventHandler,
-  ReactElement,
-  useEffect,
-  useState,
-} from "react";
+import React, { FC, MouseEventHandler, useEffect, useState } from "react";
 import { NavLink } from "react-router-dom";
+import classNames from "classnames";
 import { ButtonIcon } from "@/shared/components";
 import { useRoutesContext } from "@/shared/contexts";
-import { RightArrowThinIcon, Link4Icon } from "@/shared/icons";
-import { Common } from "@/shared/models";
+import { useIsTabletView } from "@/shared/hooks/viewport";
+import { Link4Icon } from "@/shared/icons";
 import {
   Loader,
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "@/shared/ui-kit";
+import { LinkedItemTooltipContent } from "./components";
 import { useCommonPaths } from "./hooks";
 import styles from "./LinkedItemMark.module.scss";
 
@@ -31,6 +27,7 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => {
     originalCommonId = "",
     linkedCommonIds = [],
   } = props;
+  const isTabletView = useIsTabletView();
   const [isOpen, setIsOpen] = useState(false);
   const {
     data: commonPaths,
@@ -57,45 +54,12 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => {
     fetchCommonPaths(commonIds);
   }, [isOpen]);
 
-  const renderFullPath = (commons: Common[]): ReactElement => {
-    return (
-      <div className={styles.linkLeft}>
-        {commons.map((common, commonIndex) => (
-          <React.Fragment key={common.id}>
-            {common.name}
-            {commonIndex !== commons.length - 1 && (
-              <RightArrowThinIcon className={styles.arrowIcon} />
-            )}
-          </React.Fragment>
-        ))}
-      </div>
-    );
-  };
-
-  const renderCutPath = (commons: Common[]): ReactElement => {
-    const lastCommon = commons[commons.length - 1];
-    const parentCommons = commons.slice(0, -1);
-
-    return (
-      <>
-        <div className={styles.linkLeft}>
-          {parentCommons.map((common, commonIndex) => (
-            <React.Fragment key={common.id}>
-              {common.name}
-              {commonIndex !== commons.length - 1 && (
-                <RightArrowThinIcon className={styles.arrowIcon} />
-              )}
-            </React.Fragment>
-          ))}
-        </div>
-        <div className={styles.ellipsis}>…</div>
-        <div className={styles.linkRight}>{lastCommon?.name}</div>
-      </>
-    );
-  };
-
   return (
-    <Tooltip open={isOpen} onOpenChange={setIsOpen} placement="right">
+    <Tooltip
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      placement={isTabletView ? "bottom-start" : "right"}
+    >
       <TooltipTrigger onClick={toggleTooltip} asChild>
         <ButtonIcon>
           <Link4Icon className={styles.linkIcon} />
@@ -112,11 +76,14 @@ const LinkedItemMark: FC<LinkedItemMarkProps> = (props) => {
             return (
               <NavLink
                 key={key}
-                className={styles.link}
+                className={classNames(styles.link, {
+                  [styles.linkWithBottomMargin]:
+                    index !== commonPaths.length - 1,
+                })}
                 to={getCommonPagePath(lastCommon?.id || "")}
                 title={lastCommon?.name}
               >
-                {renderCutPath(commons)}
+                <LinkedItemTooltipContent commons={commons} />
               </NavLink>
             );
           })}

src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/LinkedItemTooltipContent.module.scss

@@ -0,0 +1,24 @@
+.linkLeft,
+.linkRight {
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.linkLeft {
+  display: flex;
+  align-items: center;
+  text-overflow: ellipsis;
+}
+
+.linkRight {
+  flex-shrink: 0;
+  max-width: 25rem;
+}
+
+.ellipsis {
+  flex-shrink: 0;
+}
+
+.arrowIcon {
+  flex-shrink: 0;
+}

src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/LinkedItemTooltipContent.tsx

@@ -0,0 +1,61 @@
+import React, { FC, ReactElement, useEffect, useState } from "react";
+import { RightArrowThinIcon } from "@/shared/icons";
+import { Common } from "@/shared/models";
+import styles from "./LinkedItemTooltipContent.module.scss";
+
+interface LinkedItemTooltipContentProps {
+  commons: Common[];
+}
+
+const renderCutPath = (commons: Common[]): ReactElement => {
+  const lastCommon = commons[commons.length - 1];
+  const parentCommons = commons.slice(0, -1);
+
+  return (
+    <>
+      <div className={styles.linkLeft}>
+        {parentCommons.map((common, commonIndex) => (
+          <React.Fragment key={common.id}>
+            {common.name}
+            {commonIndex !== commons.length - 1 && (
+              <RightArrowThinIcon className={styles.arrowIcon} />
+            )}
+          </React.Fragment>
+        ))}
+      </div>
+      <div className={styles.ellipsis}>…</div>
+      <div className={styles.linkRight}>{lastCommon?.name}</div>
+    </>
+  );
+};
+
+const LinkedItemTooltipContent: FC<LinkedItemTooltipContentProps> = (props) => {
+  const { commons } = props;
+  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);
+  const [shouldCut, setShouldCut] = useState(false);
+
+  useEffect(() => {
+    if (containerRef && containerRef.scrollWidth > containerRef.clientWidth) {
+      setShouldCut(true);
+    }
+  }, [containerRef]);
+
+  if (shouldCut) {
+    return renderCutPath(commons);
+  }
+
+  return (
+    <div ref={setContainerRef} className={styles.linkLeft}>
+      {commons.map((common, commonIndex) => (
+        <React.Fragment key={common.id}>
+          {common.name}
+          {commonIndex !== commons.length - 1 && (
+            <RightArrowThinIcon className={styles.arrowIcon} />
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default LinkedItemTooltipContent;

src/pages/common/components/FeedCard/components/LinkedItemMark/components/LinkedItemTooltipContent/index.ts

@@ -0,0 +1 @@
+export { default as LinkedItemTooltipContent } from "./LinkedItemTooltipContent";

src/pages/common/components/FeedCard/components/LinkedItemMark/components/index.ts

@@ -0,0 +1 @@
+export * from "./LinkedItemTooltipContent";