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

@@ -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">
+        <a
-          <p className={`${icon ? "flex items-center gap-2" : ""}`}>
+          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">
+      <div className={`px-3 text-sm truncate ${unshrinkTitle ? "flex-shrink-0" : ""}`}>
-        <p className={`${icon ? "flex items-center gap-2" : ""}`}>
+        <p className={`truncate ${icon ? "flex items-center gap-2" : ""}`}>
           {icon}
           <span className="break-words">{title}</span>
         </p>

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 });
         }}
       >
+        <div className="flex-grow cursor-pointer min-w-[200px] whitespace-nowrap overflow-hidden overflow-ellipsis">
           <Link href={singleIssuePath}>
-          <div className="flex-grow cursor-pointer">
             <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">
+                <span className="truncate text-[0.825rem] text-custom-text-100">{issue.name}</span>
-                  {truncateText(issue.name, 50)}
-                </span>
               </Tooltip>
             </a>
-          </div>
           </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" : ""
           }`}
         >

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()

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>
 );
 

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>
       }

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>
         }

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)}

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={

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>
         }

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>
       }

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>
         }

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>
         }

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={

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>
       }
     >

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={

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>
       }
     >

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>
       }
     >

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>
         }
       >

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>
       }
     >

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>
       }
     >

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>
       }
     >

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>
         }
       >

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>
       }
     >

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>
         }
       >

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={

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>
       }
     >

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
-          <BreadcrumbItem title="Import/ Export Settings" />
+            title={`${truncateText(activeWorkspace?.name ?? "Workspace", 32)}`}
+            link={`/${workspaceSlug}`}
+            linkTruncate
+          />
+          <BreadcrumbItem title="Import/ Export Settings" unshrinkTitle />
         </Breadcrumbs>
       }
     >

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>
       }
     >

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>
       }
     >

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>
       }
     >