From e8f748a67d30e418160e52cb8c6d883739813c5c Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Mon, 31 Jul 2023 17:22:48 +0530
Subject: [PATCH] style: responsive title (#1683)

* style: responsive issue title added

* style: responsive breadcrumbs and app-header layout

* style: breadcrumbs styling

* fix: app header dropdown issue and limit app header title to 32 characters
---
 apps/app/components/breadcrumbs/index.tsx     | 27 ++++++++++++++-----
 .../core/views/list-view/single-issue.tsx     | 16 +++++------
 .../issues/view-select/due-date.tsx           |  2 +-
 apps/app/layouts/app-layout/app-header.tsx    |  8 +++---
 .../archived-issues/[archivedIssueId].tsx     |  6 ++++-
 .../[projectId]/archived-issues/index.tsx     |  6 ++---
 .../projects/[projectId]/cycles/[cycleId].tsx |  7 ++---
 .../projects/[projectId]/cycles/index.tsx     |  4 ++-
 .../projects/[projectId]/inbox/[inboxId].tsx  |  2 +-
 .../projects/[projectId]/issues/[issueId].tsx |  6 ++++-
 .../projects/[projectId]/issues/index.tsx     |  2 +-
 .../[projectId]/modules/[moduleId].tsx        |  3 ++-
 .../projects/[projectId]/modules/index.tsx    |  4 ++-
 .../projects/[projectId]/pages/[pageId].tsx   |  4 +--
 .../projects/[projectId]/pages/index.tsx      |  8 ++++--
 .../[projectId]/settings/automations.tsx      |  7 +++--
 .../projects/[projectId]/settings/control.tsx |  7 +++--
 .../[projectId]/settings/estimates.tsx        |  7 +++--
 .../[projectId]/settings/features.tsx         |  7 +++--
 .../projects/[projectId]/settings/index.tsx   |  6 +++--
 .../[projectId]/settings/integrations.tsx     |  7 +++--
 .../projects/[projectId]/settings/labels.tsx  |  7 +++--
 .../projects/[projectId]/settings/members.tsx |  7 +++--
 .../projects/[projectId]/settings/states.tsx  |  6 +++--
 .../pages/[workspaceSlug]/projects/index.tsx  |  7 ++++-
 .../[workspaceSlug]/settings/billing.tsx      |  7 +++--
 .../settings/import-export.tsx                | 23 +++++++++++++---
 .../pages/[workspaceSlug]/settings/index.tsx  |  6 +++--
 .../[workspaceSlug]/settings/integrations.tsx |  7 +++--
 .../[workspaceSlug]/settings/members.tsx      |  7 +++--
 30 files changed, 155 insertions(+), 68 deletions(-)

diff --git a/apps/app/components/breadcrumbs/index.tsx b/apps/app/components/breadcrumbs/index.tsx
index 8a67c92b9..0e5cfb9c4 100644
--- a/apps/app/components/breadcrumbs/index.tsx
+++ b/apps/app/components/breadcrumbs/index.tsx
@@ -2,7 +2,6 @@ import * as React from "react";
 import { useRouter } from "next/router";
 import Link from "next/link";
 // icons
-import { ArrowLeftIcon } from "@heroicons/react/24/outline";
 import { Icon } from "components/ui";
 
 type BreadcrumbsProps = {
@@ -14,7 +13,7 @@ const Breadcrumbs = ({ children }: BreadcrumbsProps) => {
 
   return (
     <>
-      <div className="flex items-center">
+      <div className="flex items-center flex-grow w-full whitespace-nowrap overflow-hidden overflow-ellipsis">
         <button
           type="button"
           className="group grid h-7 w-7 flex-shrink-0 cursor-pointer place-items-center rounded border border-custom-sidebar-border-200 text-center text-sm hover:bg-custom-sidebar-background-90"
@@ -35,22 +34,36 @@ type BreadcrumbItemProps = {
   title: string;
   link?: string;
   icon?: any;
+  linkTruncate?: boolean;
+  unshrinkTitle?: boolean;
 };
 
-const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({ title, link, icon }) => (
+const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
+  title,
+  link,
+  icon,
+  linkTruncate = false,
+  unshrinkTitle = false,
+}) => (
   <>
     {link ? (
       <Link href={link}>
-        <a className="border-r-2 border-custom-sidebar-border-200 px-3 text-sm">
-          <p className={`${icon ? "flex items-center gap-2" : ""}`}>
+        <a
+          className={`border-r-2 border-custom-sidebar-border-200 px-3 text-sm ${
+            linkTruncate ? "truncate" : ""
+          }`}
+        >
+          <p
+            className={`${linkTruncate ? "truncate" : ""}${icon ? "flex items-center gap-2" : ""}`}
+          >
             {icon ?? null}
             {title}
           </p>
         </a>
       </Link>
     ) : (
-      <div className="max-w-64 px-3 text-sm">
-        <p className={`${icon ? "flex items-center gap-2" : ""}`}>
+      <div className={`px-3 text-sm truncate ${unshrinkTitle ? "flex-shrink-0" : ""}`}>
+        <p className={`truncate ${icon ? "flex items-center gap-2" : ""}`}>
           {icon}
           <span className="break-words">{title}</span>
         </p>
diff --git a/apps/app/components/core/views/list-view/single-issue.tsx b/apps/app/components/core/views/list-view/single-issue.tsx
index aa6c4caff..cb71774f0 100644
--- a/apps/app/components/core/views/list-view/single-issue.tsx
+++ b/apps/app/components/core/views/list-view/single-issue.tsx
@@ -194,15 +194,15 @@ export const SingleListIssue: React.FC<Props> = ({
         </a>
       </ContextMenu>
       <div
-        className="flex flex-wrap items-center justify-between px-4 py-2.5 gap-2 border-b border-custom-border-200 bg-custom-background-100 last:border-b-0"
+        className="flex items-center justify-between px-4 py-2.5 gap-10 border-b border-custom-border-200 bg-custom-background-100 last:border-b-0"
         onContextMenu={(e) => {
           e.preventDefault();
           setContextMenu(true);
           setContextMenuPosition({ x: e.pageX, y: e.pageY });
         }}
       >
-        <Link href={singleIssuePath}>
-          <div className="flex-grow cursor-pointer">
+        <div className="flex-grow cursor-pointer min-w-[200px] whitespace-nowrap overflow-hidden overflow-ellipsis">
+          <Link href={singleIssuePath}>
             <a className="group relative flex items-center gap-2">
               {properties.key && (
                 <Tooltip
@@ -215,16 +215,14 @@ export const SingleListIssue: React.FC<Props> = ({
                 </Tooltip>
               )}
               <Tooltip position="top-left" tooltipHeading="Title" tooltipContent={issue.name}>
-                <span className="text-[0.825rem] text-custom-text-100">
-                  {truncateText(issue.name, 50)}
-                </span>
+                <span className="truncate text-[0.825rem] text-custom-text-100">{issue.name}</span>
               </Tooltip>
             </a>
-          </div>
-        </Link>
+          </Link>
+        </div>
 
         <div
-          className={`flex w-full flex-shrink flex-wrap items-center gap-2 text-xs sm:w-auto ${
+          className={`flex flex-shrink-0 items-center gap-2 text-xs ${
             isArchivedIssues ? "opacity-60" : ""
           }`}
         >
diff --git a/apps/app/components/issues/view-select/due-date.tsx b/apps/app/components/issues/view-select/due-date.tsx
index f45440cfc..67b864526 100644
--- a/apps/app/components/issues/view-select/due-date.tsx
+++ b/apps/app/components/issues/view-select/due-date.tsx
@@ -41,7 +41,7 @@ export const ViewDueDateSelect: React.FC<Props> = ({
       position={tooltipPosition}
     >
       <div
-        className={`group relative max-w-[6.5rem] ${
+        className={`group flex-shrink-0 relative max-w-[6.5rem] ${
           issue.target_date === null
             ? ""
             : issue.target_date < new Date().toISOString()
diff --git a/apps/app/layouts/app-layout/app-header.tsx b/apps/app/layouts/app-layout/app-header.tsx
index b8eff97a9..f63d65650 100644
--- a/apps/app/layouts/app-layout/app-header.tsx
+++ b/apps/app/layouts/app-layout/app-header.tsx
@@ -11,11 +11,11 @@ type Props = {
 
 const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, noHeader }) => (
   <div
-    className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 px-5 py-4 ${
+    className={`relative flex w-full flex-shrink-0 flex-row z-10 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 px-5 py-4 ${
       noHeader ? "md:hidden" : ""
     }`}
   >
-    <div className="flex items-center gap-2">
+    <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
       <div className="block md:hidden">
         <button
           type="button"
@@ -26,9 +26,9 @@ const Header: React.FC<Props> = ({ breadcrumbs, left, right, setToggleSidebar, n
         </button>
       </div>
       {breadcrumbs}
-      {left}
+      <div className="flex-shrink-0">{left}</div>
     </div>
-    {right}
+    <div className="flex-shrink-0">{right}</div>
   </div>
 );
 
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
index d66575282..a48207db3 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/[archivedIssueId].tsx
@@ -23,6 +23,8 @@ import { IIssue } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const defaultValues = {
   name: "",
@@ -146,13 +148,15 @@ const ArchivedIssueDetailsPage: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
-            title={`${issueDetails?.project_detail.name ?? "Project"} Issues`}
+            title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
             link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
+            linkTruncate
           />
           <Breadcrumbs.BreadcrumbItem
             title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
               issueDetails?.sequence_id ?? "..."
             } Details`}
+            unshrinkTitle
           />
         </Breadcrumbs>
       }
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
index e944301d3..b2c0ab428 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/archived-issues/index.tsx
@@ -4,6 +4,8 @@ import useSWR from "swr";
 
 // services
 import projectService from "services/project.service";
+// hooks
+import useIssuesView from "hooks/use-issues-view";
 // layouts
 import { ProjectAuthorizationWrapper } from "layouts/auth-layout";
 // contexts
@@ -21,8 +23,6 @@ import { XMarkIcon } from "@heroicons/react/24/outline";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS } from "constants/fetch-keys";
-import useIssuesView from "hooks/use-issues-view";
-import { useEffect } from "react";
 
 const ProjectArchivedIssues: NextPage = () => {
   const router = useRouter();
@@ -44,7 +44,7 @@ const ProjectArchivedIssues: NextPage = () => {
           <Breadcrumbs>
             <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
             <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 12)} Archived Issues`}
+              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Archived Issues`}
             />
           </Breadcrumbs>
         }
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
index 73d6b4f80..0da8f797c 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/[cycleId].tsx
@@ -109,8 +109,9 @@ const SingleCycle: React.FC = () => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${cycleDetails?.project_detail.name ?? "Project"} Cycles`}
+              title={`${truncateText(cycleDetails?.project_detail.name ?? "Project", 32)} Cycles`}
               link={`/${workspaceSlug}/projects/${projectId}/cycles`}
+              linkTruncate
             />
           </Breadcrumbs>
         }
@@ -122,7 +123,7 @@ const SingleCycle: React.FC = () => {
                 {cycleDetails?.name && truncateText(cycleDetails.name, 40)}
               </>
             }
-            className="ml-1.5"
+            className="ml-1.5 flex-shrink-0"
             width="auto"
           >
             {cycles?.map((cycle) => (
@@ -137,7 +138,7 @@ const SingleCycle: React.FC = () => {
           </CustomMenu>
         }
         right={
-          <div className={`flex items-center gap-2 duration-300`}>
+          <div className={`flex flex-shrink-0 items-center gap-2 duration-300`}>
             <IssuesFilterView />
             <SecondaryButton
               onClick={() => setAnalyticsModal(true)}
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
index 744d636fa..0ea9e73e3 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/cycles/index.tsx
@@ -29,6 +29,8 @@ import emptyCycle from "public/empty-state/cycle.svg";
 // types
 import { SelectCycleType } from "types";
 import type { NextPage } from "next";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const tabsList = ["All", "Active", "Upcoming", "Completed", "Drafts"];
 
@@ -91,7 +93,7 @@ const ProjectCycles: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Cycles`} />
+          <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project", 32)} Cycles`} />
         </Breadcrumbs>
       }
       right={
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
index cad3c3830..7a82ac61f 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/inbox/[inboxId].tsx
@@ -31,7 +31,7 @@ const ProjectInbox: NextPage = () => {
           <Breadcrumbs>
             <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
             <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 12)} Inbox`}
+              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Inbox`}
             />
           </Breadcrumbs>
         }
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
index 0c70ff2e9..d5f7c8ec6 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/[issueId].tsx
@@ -22,6 +22,8 @@ import { IIssue } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_ISSUES_ACTIVITY, ISSUE_DETAILS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const defaultValues = {
   name: "",
@@ -110,13 +112,15 @@ const IssueDetailsPage: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
-            title={`${issueDetails?.project_detail.name ?? "Project"} Issues`}
+            title={`${truncateText(issueDetails?.project_detail.name ?? "Project", 32)} Issues`}
             link={`/${workspaceSlug}/projects/${projectId as string}/issues`}
+            linkTruncate
           />
           <Breadcrumbs.BreadcrumbItem
             title={`Issue ${issueDetails?.project_detail.identifier ?? "Project"}-${
               issueDetails?.sequence_id ?? "..."
             } Details`}
+            unshrinkTitle
           />
         </Breadcrumbs>
       }
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
index 63d7ffb51..91da78757 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/issues/index.tsx
@@ -54,7 +54,7 @@ const ProjectIssues: NextPage = () => {
           <Breadcrumbs>
             <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
             <BreadcrumbItem
-              title={`${truncateText(projectDetails?.name ?? "Project", 12)} Issues`}
+              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Issues`}
             />
           </Breadcrumbs>
         }
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
index 44f6d5d23..71c3bb655 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/[moduleId].tsx
@@ -112,8 +112,9 @@ const SingleModule: React.FC = () => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${moduleDetails?.project_detail.name ?? "Project"} Modules`}
+              title={`${truncateText(moduleDetails?.project_detail.name ?? "Project", 32)} Modules`}
               link={`/${workspaceSlug}/projects/${projectId}/modules`}
+              linkTruncate
             />
           </Breadcrumbs>
         }
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
index ba952be7a..b5b1e3806 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/modules/index.tsx
@@ -29,6 +29,8 @@ import { IModule, SelectModuleType } from "types/modules";
 import type { NextPage } from "next";
 // fetch-keys
 import { MODULE_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const ProjectModules: NextPage = () => {
   const [selectedModule, setSelectedModule] = useState<SelectModuleType>();
@@ -73,7 +75,7 @@ const ProjectModules: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${activeProject?.name ?? "Project"} Modules`} />
+          <BreadcrumbItem title={`${truncateText(activeProject?.name ?? "Project", 32)} Modules`} />
         </Breadcrumbs>
       }
       right={
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
index f15b9aa1d..b26be661e 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/[pageId].tsx
@@ -43,7 +43,7 @@ import {
 import { ColorPalletteIcon, ClipboardIcon } from "components/icons";
 // helpers
 import { render24HourFormatTime, renderShortDate } from "helpers/date-time.helper";
-import { copyTextToClipboard } from "helpers/string.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 import { orderArrayBy } from "helpers/array.helper";
 // types
 import type { NextPage } from "next";
@@ -346,7 +346,7 @@ const SinglePage: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-          <BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Pages`} />
+          <BreadcrumbItem title={`${truncateText(projectDetails?.name ?? "Project",32)} Pages`} />
         </Breadcrumbs>
       }
     >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
index a07bcce26..f6f8d3d86 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/pages/index.tsx
@@ -11,6 +11,7 @@ import { Tab } from "@headlessui/react";
 import projectService from "services/project.service";
 // hooks
 import useLocalStorage from "hooks/use-local-storage";
+import useUserAuth from "hooks/use-user-auth";
 // icons
 import { PlusIcon } from "components/icons";
 // layouts
@@ -27,7 +28,8 @@ import { TPageViewProps } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS } from "constants/fetch-keys";
-import useUserAuth from "hooks/use-user-auth";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const AllPagesList = dynamic<TPagesListProps>(
   () => import("components/pages").then((a) => a.AllPagesList),
@@ -107,7 +109,9 @@ const ProjectPages: NextPage = () => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem title="Projects" link={`/${workspaceSlug}/projects`} />
-            <BreadcrumbItem title={`${projectDetails?.name ?? "Project"} Pages`} />
+            <BreadcrumbItem
+              title={`${truncateText(projectDetails?.name ?? "Project", 32)} Pages`}
+            />
           </Breadcrumbs>
         }
         right={
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
index ca4ac770d..a65222af5 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/automations.tsx
@@ -22,6 +22,8 @@ import type { NextPage } from "next";
 import { IProject } from "types";
 // constant
 import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const AutomationsSettings: NextPage = () => {
   const router = useRouter();
@@ -65,10 +67,11 @@ const AutomationsSettings: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
-            title={`${projectDetails?.name ?? "Project"}`}
+            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
             link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+            linkTruncate
           />
-          <BreadcrumbItem title="Automations Settings" />
+          <BreadcrumbItem title="Automations Settings" unshrinkTitle />
         </Breadcrumbs>
       }
     >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
index d0a102e05..9e8d437e8 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/control.tsx
@@ -23,6 +23,8 @@ import { IProject, IUserLite, IWorkspace } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS, PROJECT_MEMBERS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const defaultValues: Partial<IProject> = {
   project_lead: null,
@@ -103,10 +105,11 @@ const ControlSettings: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
-            title={`${projectDetails?.name ?? "Project"}`}
+            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
             link={`/${workspaceSlug}/projects/${projectId}/issues`}
+            linkTruncate
           />
-          <BreadcrumbItem title="Control Settings" />
+          <BreadcrumbItem title="Control Settings" unshrinkTitle />
         </Breadcrumbs>
       }
     >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
index 39efc12c3..7c82f7dd4 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/estimates.tsx
@@ -29,6 +29,8 @@ import { IEstimate, IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { ESTIMATES_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const EstimatesSettings: NextPage = () => {
   const [estimateFormOpen, setEstimateFormOpen] = useState(false);
@@ -115,10 +117,11 @@ const EstimatesSettings: NextPage = () => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${projectDetails?.name ?? "Project"}`}
+              title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
               link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+              linkTruncate
             />
-            <BreadcrumbItem title="Estimates Settings" />
+            <BreadcrumbItem title="Estimates Settings" unshrinkTitle />
           </Breadcrumbs>
         }
       >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
index 517004dac..be0c2198a 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/features.tsx
@@ -25,6 +25,8 @@ import { IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECTS_LIST, PROJECT_DETAILS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const featuresList = [
   {
@@ -139,10 +141,11 @@ const FeaturesSettings: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
-            title={`${projectDetails?.name ?? "Project"}`}
+            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
             link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+            linkTruncate
           />
-          <BreadcrumbItem title="Features Settings" />
+          <BreadcrumbItem title="Features Settings" unshrinkTitle />
         </Breadcrumbs>
       }
     >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
index 390dc206b..7de91c823 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/index.tsx
@@ -29,6 +29,7 @@ import {
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // helpers
 import { renderEmoji } from "helpers/emoji.helper";
+import { truncateText } from "helpers/string.helper";
 // types
 import { IProject, IWorkspace } from "types";
 import type { NextPage } from "next";
@@ -161,10 +162,11 @@ const GeneralSettings: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
-            title={`${projectDetails?.name ?? "Project"}`}
+            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
             link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+            linkTruncate
           />
-          <BreadcrumbItem title="General Settings" />
+          <BreadcrumbItem title="General Settings" unshrinkTitle />
         </Breadcrumbs>
       }
     >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
index 7726df02a..0ede7d216 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/integrations.tsx
@@ -23,6 +23,8 @@ import { IProject } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, WORKSPACE_INTEGRATIONS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const ProjectIntegrations: NextPage = () => {
   const router = useRouter();
@@ -48,10 +50,11 @@ const ProjectIntegrations: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
-            title={`${projectDetails?.name ?? "Project"}`}
+            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
             link={`/${workspaceSlug}/projects/${projectId}/issues`}
+            linkTruncate
           />
-          <BreadcrumbItem title="Integrations" />
+          <BreadcrumbItem title="Integrations" unshrinkTitle />
         </Breadcrumbs>
       }
     >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
index 228c8ed44..d8c425ee5 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/labels.tsx
@@ -32,6 +32,8 @@ import { IIssueLabels } from "types";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_DETAILS, PROJECT_ISSUE_LABELS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const LabelsSettings: NextPage = () => {
   // create/edit label form
@@ -103,10 +105,11 @@ const LabelsSettings: NextPage = () => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${projectDetails?.name ?? "Project"}`}
+              title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
               link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+              linkTruncate
             />
-            <BreadcrumbItem title="Labels Settings" />
+            <BreadcrumbItem title="Labels Settings" unshrinkTitle />
           </Breadcrumbs>
         }
       >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
index 0a5897013..d828b3912 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/members.tsx
@@ -29,6 +29,8 @@ import type { NextPage } from "next";
 import { PROJECT_INVITATIONS, PROJECT_MEMBERS, WORKSPACE_DETAILS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const MembersSettings: NextPage = () => {
   const [inviteModal, setInviteModal] = useState(false);
@@ -94,10 +96,11 @@ const MembersSettings: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
-            title={`${projectDetails?.name ?? "Project"}`}
+            title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
             link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+            linkTruncate
           />
-          <BreadcrumbItem title="Members Settings" />
+          <BreadcrumbItem title="Members Settings" unshrinkTitle />
         </Breadcrumbs>
       }
     >
diff --git a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
index 0b7b0fb72..73337c6bb 100644
--- a/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/[projectId]/settings/states.tsx
@@ -26,6 +26,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import { PlusIcon } from "@heroicons/react/24/outline";
 // helpers
 import { getStatesList, orderStateGroups } from "helpers/state.helper";
+import { truncateText } from "helpers/string.helper";
 // types
 import type { NextPage } from "next";
 // fetch-keys
@@ -64,10 +65,11 @@ const StatesSettings: NextPage = () => {
         breadcrumbs={
           <Breadcrumbs>
             <BreadcrumbItem
-              title={`${projectDetails?.name ?? "Project"}`}
+              title={`${truncateText(projectDetails?.name ?? "Project", 32)}`}
               link={`/${workspaceSlug}/projects/${projectDetails?.id}/issues`}
+              linkTruncate
             />
-            <BreadcrumbItem title="States Settings" />
+            <BreadcrumbItem title="States Settings" unshrinkTitle />
           </Breadcrumbs>
         }
       >
diff --git a/apps/app/pages/[workspaceSlug]/projects/index.tsx b/apps/app/pages/[workspaceSlug]/projects/index.tsx
index e6bf7a28a..5f3fbcc07 100644
--- a/apps/app/pages/[workspaceSlug]/projects/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/projects/index.tsx
@@ -26,6 +26,8 @@ import emptyProject from "public/empty-state/project.svg";
 import type { NextPage } from "next";
 // fetch-keys
 import { PROJECT_MEMBERS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const ProjectsPage: NextPage = () => {
   // router
@@ -44,7 +46,10 @@ const ProjectsPage: NextPage = () => {
     <WorkspaceAuthorizationLayout
       breadcrumbs={
         <Breadcrumbs>
-          <BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Projects`} />
+          <BreadcrumbItem
+            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Projects`}
+            unshrinkTitle={false}
+          />
         </Breadcrumbs>
       }
       right={
diff --git a/apps/app/pages/[workspaceSlug]/settings/billing.tsx b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
index 2367b94b4..6731cd33f 100644
--- a/apps/app/pages/[workspaceSlug]/settings/billing.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/billing.tsx
@@ -16,6 +16,8 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import type { NextPage } from "next";
 // fetch-keys
 import { WORKSPACE_DETAILS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const BillingSettings: NextPage = () => {
   const {
@@ -32,10 +34,11 @@ const BillingSettings: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
-            title={`${activeWorkspace?.name ?? "Workspace"}`}
+            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
             link={`/${workspaceSlug}`}
+            linkTruncate
           />
-          <BreadcrumbItem title="Billing & Plans Settings" />
+          <BreadcrumbItem title="Billing & Plans Settings" unshrinkTitle />
         </Breadcrumbs>
       }
     >
diff --git a/apps/app/pages/[workspaceSlug]/settings/import-export.tsx b/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
index efd72af24..ae31aa9f8 100644
--- a/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/import-export.tsx
@@ -1,26 +1,43 @@
 import { useRouter } from "next/router";
 
+import useSWR from "swr";
+
+// services
+import workspaceService from "services/workspace.service";
 // layouts
 import { WorkspaceAuthorizationLayout } from "layouts/auth-layout";
 import { SettingsHeader } from "components/workspace";
 // components
 import IntegrationGuide from "components/integration/guide";
+import { IntegrationAndImportExportBanner } from "components/ui";
 // ui
 import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // types
 import type { NextPage } from "next";
-import { IntegrationAndImportExportBanner } from "components/ui";
+// fetch-keys
+import { WORKSPACE_DETAILS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const ImportExport: NextPage = () => {
   const router = useRouter();
   const { workspaceSlug } = router.query;
 
+  const { data: activeWorkspace } = useSWR(
+    workspaceSlug ? WORKSPACE_DETAILS(workspaceSlug as string) : null,
+    () => (workspaceSlug ? workspaceService.getWorkspace(workspaceSlug as string) : null)
+  );
+
   return (
     <WorkspaceAuthorizationLayout
       breadcrumbs={
         <Breadcrumbs>
-          <BreadcrumbItem title={`${workspaceSlug ?? "Workspace"}`} link={`/${workspaceSlug}`} />
-          <BreadcrumbItem title="Import/ Export Settings" />
+          <BreadcrumbItem
+            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
+            link={`/${workspaceSlug}`}
+            linkTruncate
+          />
+          <BreadcrumbItem title="Import/ Export Settings" unshrinkTitle />
         </Breadcrumbs>
       }
     >
diff --git a/apps/app/pages/[workspaceSlug]/settings/index.tsx b/apps/app/pages/[workspaceSlug]/settings/index.tsx
index 8c76d6e6e..af46e0884 100644
--- a/apps/app/pages/[workspaceSlug]/settings/index.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/index.tsx
@@ -23,7 +23,7 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 // icons
 import { LinkIcon } from "@heroicons/react/24/outline";
 // helpers
-import { copyTextToClipboard } from "helpers/string.helper";
+import { copyTextToClipboard, truncateText } from "helpers/string.helper";
 // types
 import type { IWorkspace } from "types";
 import type { NextPage } from "next";
@@ -146,7 +146,9 @@ const WorkspaceSettings: NextPage = () => {
     <WorkspaceAuthorizationLayout
       breadcrumbs={
         <Breadcrumbs>
-          <BreadcrumbItem title={`${activeWorkspace?.name ?? "Workspace"} Settings`} />
+          <BreadcrumbItem
+            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)} Settings`}
+          />
         </Breadcrumbs>
       }
     >
diff --git a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
index b94057bea..1b7a540c4 100644
--- a/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/integrations.tsx
@@ -19,6 +19,8 @@ import { BreadcrumbItem, Breadcrumbs } from "components/breadcrumbs";
 import type { NextPage } from "next";
 // fetch-keys
 import { WORKSPACE_DETAILS, APP_INTEGRATIONS } from "constants/fetch-keys";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const WorkspaceIntegrations: NextPage = () => {
   const router = useRouter();
@@ -38,10 +40,11 @@ const WorkspaceIntegrations: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
-            title={`${activeWorkspace?.name ?? "Workspace"}`}
+            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
             link={`/${workspaceSlug}`}
+            linkTruncate
           />
-          <BreadcrumbItem title="Integrations" />
+          <BreadcrumbItem title="Integrations" unshrinkTitle />
         </Breadcrumbs>
       }
     >
diff --git a/apps/app/pages/[workspaceSlug]/settings/members.tsx b/apps/app/pages/[workspaceSlug]/settings/members.tsx
index 2f6167277..c9c4a2eac 100644
--- a/apps/app/pages/[workspaceSlug]/settings/members.tsx
+++ b/apps/app/pages/[workspaceSlug]/settings/members.tsx
@@ -27,6 +27,8 @@ import type { NextPage } from "next";
 import { WORKSPACE_DETAILS, WORKSPACE_INVITATIONS, WORKSPACE_MEMBERS } from "constants/fetch-keys";
 // constants
 import { ROLE } from "constants/workspace";
+// helper
+import { truncateText } from "helpers/string.helper";
 
 const MembersSettings: NextPage = () => {
   const [selectedRemoveMember, setSelectedRemoveMember] = useState<string | null>(null);
@@ -89,10 +91,11 @@ const MembersSettings: NextPage = () => {
       breadcrumbs={
         <Breadcrumbs>
           <BreadcrumbItem
-            title={`${activeWorkspace?.name ?? "Workspace"}`}
+            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
             link={`/${workspaceSlug}`}
+            linkTruncate
           />
-          <BreadcrumbItem title="Members Settings" />
+          <BreadcrumbItem title="Members Settings" unshrinkTitle />
         </Breadcrumbs>
       }
     >