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/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 title="Import/ Export Settings" />
+          <BreadcrumbItem
+            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>
       }
     >