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