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
2023-07-31 17:22:48 +05:30 · 2023-07-31 17:22:48 +05:30 · e8f748a67d
commit e8f748a67d
parent 81b1405448
30 changed files with 155 additions and 68 deletions
--- 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>
--- 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" : ""
          }`}
        >
--- 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()
--- 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>
 );

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