From d479781fcef259734d00a5f48fae478ac63f91e7 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Fri, 10 Nov 2023 18:30:43 +0530
Subject: [PATCH] style: header consistency (#2750)

---
 web/components/headers/cycle-issues.tsx       |  2 +-
 web/components/headers/cycles.tsx             |  5 ++---
 web/components/headers/global-issues.tsx      |  4 ++--
 web/components/headers/module-issues.tsx      |  2 +-
 web/components/headers/modules-list.tsx       |  5 ++---
 web/components/headers/page-details.tsx       |  2 +-
 web/components/headers/pages.tsx              |  2 +-
 .../headers/profile-preferences.tsx           |  4 +---
 .../project-archived-issue-details.tsx        |  2 +-
 .../headers/project-archived-issues.tsx       |  2 +-
 .../headers/project-draft-issues.tsx          |  2 +-
 web/components/headers/project-inbox.tsx      |  2 +-
 .../headers/project-issue-details.tsx         |  2 +-
 web/components/headers/project-issues.tsx     |  2 +-
 web/components/headers/project-settings.tsx   |  4 +---
 .../headers/project-view-issues.tsx           |  2 +-
 web/components/headers/project-views.tsx      |  4 +---
 web/components/headers/projects.tsx           |  6 ++---
 web/components/headers/user-profile.tsx       |  4 +---
 .../headers/workspace-analytics.tsx           |  2 +-
 .../headers/workspace-dashboard.tsx           | 22 ++++++++++++-------
 web/components/headers/workspace-settings.tsx |  4 +---
 22 files changed, 39 insertions(+), 47 deletions(-)

diff --git a/web/components/headers/cycle-issues.tsx b/web/components/headers/cycle-issues.tsx
index 163775599..3f177cded 100644
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -113,7 +113,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         cycleDetails={cycleDetails ?? undefined}
       />
-      <div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative w-full flex items-center z-10 h-[3.75rem] justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2">
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
diff --git a/web/components/headers/cycles.tsx b/web/components/headers/cycles.tsx
index a908bbdba..471a2bc05 100644
--- a/web/components/headers/cycles.tsx
+++ b/web/components/headers/cycles.tsx
@@ -18,9 +18,7 @@ export const CyclesHeader: FC = observer(() => {
   const { currentProjectDetails } = projectStore;
 
   return (
-    <div
-      className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
-    >
+    <div className="relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between h-[3.75rem] gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
@@ -51,6 +49,7 @@ export const CyclesHeader: FC = observer(() => {
       <div className="flex items-center gap-3">
         <Button
           variant="primary"
+          size="sm"
           prependIcon={<Plus />}
           onClick={() => commandPaletteStore.toggleCreateCycleModal(true)}
         >
diff --git a/web/components/headers/global-issues.tsx b/web/components/headers/global-issues.tsx
index 5be966906..52a60540f 100644
--- a/web/components/headers/global-issues.tsx
+++ b/web/components/headers/global-issues.tsx
@@ -99,7 +99,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
   return (
     <>
       <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative w-full flex items-center z-10 h-[3.75rem] justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div>
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
@@ -163,7 +163,7 @@ export const GlobalIssuesHeader: React.FC<Props> = observer((props) => {
               </FiltersDropdown>
             </>
           )}
-          <Button variant="primary" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
+          <Button variant="primary" size="sm" prependIcon={<PlusIcon />} onClick={() => setCreateViewModal(true)}>
             New View
           </Button>
         </div>
diff --git a/web/components/headers/module-issues.tsx b/web/components/headers/module-issues.tsx
index 8e1c20da3..cea8093bf 100644
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -112,7 +112,7 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         moduleDetails={moduleDetails ?? undefined}
       />
-      <div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+      <div className="relative w-full flex items-center z-10 h-[3.75rem] justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2">
           <Breadcrumbs>
             <Breadcrumbs.BreadcrumbItem
diff --git a/web/components/headers/modules-list.tsx b/web/components/headers/modules-list.tsx
index 21ecfdb40..b1f1ce773 100644
--- a/web/components/headers/modules-list.tsx
+++ b/web/components/headers/modules-list.tsx
@@ -23,9 +23,7 @@ export const ModulesListHeader: React.FC = observer(() => {
   const { storedValue: modulesView, setValue: setModulesView } = useLocalStorage("modules_view", "grid");
 
   return (
-    <div
-      className={`relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
-    >
+    <div className="relative z-10 flex w-full flex-shrink-0 flex-row items-center justify-between h-[3.75rem] gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div>
           <Breadcrumbs>
@@ -76,6 +74,7 @@ export const ModulesListHeader: React.FC = observer(() => {
         </div>
         <Button
           variant="primary"
+          size="sm"
           prependIcon={<Plus />}
           onClick={() => commandPaletteStore.toggleCreateModuleModal(true)}
         >
diff --git a/web/components/headers/page-details.tsx b/web/components/headers/page-details.tsx
index a0bf29d05..84681e768 100644
--- a/web/components/headers/page-details.tsx
+++ b/web/components/headers/page-details.tsx
@@ -39,7 +39,7 @@ export const PageDetailsHeader: FC<IPagesHeaderProps> = observer((props) => {
   );
 
   return (
-    <div 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 p-4">
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/pages.tsx b/web/components/headers/pages.tsx
index 0a3fd53f6..7762458f2 100644
--- a/web/components/headers/pages.tsx
+++ b/web/components/headers/pages.tsx
@@ -22,7 +22,7 @@ export const PagesHeader: FC<IPagesHeaderProps> = observer((props) => {
   const { currentProjectDetails } = projectStore;
 
   return (
-    <div 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 p-4">
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/profile-preferences.tsx b/web/components/headers/profile-preferences.tsx
index cde226fd7..78a651de5 100644
--- a/web/components/headers/profile-preferences.tsx
+++ b/web/components/headers/profile-preferences.tsx
@@ -2,9 +2,7 @@
 import { Breadcrumbs } from "@plane/ui";
 
 export const ProfilePreferencesHeader = () => (
-  <div
-    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 p-4`}
-  >
+  <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
     <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
       <div>
         <Breadcrumbs>
diff --git a/web/components/headers/project-archived-issue-details.tsx b/web/components/headers/project-archived-issue-details.tsx
index be8b5cebe..3056934dc 100644
--- a/web/components/headers/project-archived-issue-details.tsx
+++ b/web/components/headers/project-archived-issue-details.tsx
@@ -38,7 +38,7 @@ export const ProjectArchivedIssueDetailsHeader: FC = observer(() => {
   );
 
   return (
-    <div 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 p-4">
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/project-archived-issues.tsx b/web/components/headers/project-archived-issues.tsx
index 3fa1b65b0..4c2d9f354 100644
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@@ -71,7 +71,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
   };
 
   return (
-    <div 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 p-4">
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-14 items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         <div className="block md:hidden">
           <button
diff --git a/web/components/headers/project-draft-issues.tsx b/web/components/headers/project-draft-issues.tsx
index 0ab1603be..11c5d01ab 100644
--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -16,7 +16,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
   const { currentProjectDetails } = projectStore;
 
   return (
-    <div 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 p-4">
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/project-inbox.tsx b/web/components/headers/project-inbox.tsx
index 5098c69b9..15c067d66 100644
--- a/web/components/headers/project-inbox.tsx
+++ b/web/components/headers/project-inbox.tsx
@@ -21,7 +21,7 @@ export const ProjectInboxHeader: FC = observer(() => {
   const { currentProjectDetails } = projectStore;
 
   return (
-    <div 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 p-4">
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/project-issue-details.tsx b/web/components/headers/project-issue-details.tsx
index 9fce63575..6c89f7a09 100644
--- a/web/components/headers/project-issue-details.tsx
+++ b/web/components/headers/project-issue-details.tsx
@@ -32,7 +32,7 @@ export const ProjectIssueDetailsHeader: FC = observer(() => {
   );
 
   return (
-    <div 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 p-4">
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/project-issues.tsx b/web/components/headers/project-issues.tsx
index ebc6cc585..5b87b14c4 100644
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -105,7 +105,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
         onClose={() => setAnalyticsModal(false)}
         projectDetails={currentProjectDetails ?? undefined}
       />
-      <div 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 p-4">
+      <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
           <div className="block md:hidden">
             <button
diff --git a/web/components/headers/project-settings.tsx b/web/components/headers/project-settings.tsx
index 6c20c32df..3dfb9da07 100644
--- a/web/components/headers/project-settings.tsx
+++ b/web/components/headers/project-settings.tsx
@@ -22,9 +22,7 @@ export const ProjectSettingHeader: FC<IProjectSettingHeader> = observer((props)
   const { currentProjectDetails } = projectStore;
 
   return (
-    <div
-      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 p-4`}
-    >
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/project-view-issues.tsx b/web/components/headers/project-view-issues.tsx
index 55eeac5c2..7e899d851 100644
--- a/web/components/headers/project-view-issues.tsx
+++ b/web/components/headers/project-view-issues.tsx
@@ -95,7 +95,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
   const viewDetails = viewId ? projectViewsStore.viewDetails[viewId.toString()] : undefined;
 
   return (
-    <div className="relative w-full flex items-center z-10 justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative w-full flex items-center z-10 h-[3.75rem] justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2">
         <Breadcrumbs>
           <Breadcrumbs.BreadcrumbItem
diff --git a/web/components/headers/project-views.tsx b/web/components/headers/project-views.tsx
index 550863d0d..66e320872 100644
--- a/web/components/headers/project-views.tsx
+++ b/web/components/headers/project-views.tsx
@@ -31,9 +31,7 @@ export const ProjectViewsHeader: React.FC = observer(() => {
           projectId={projectId.toString()}
         />
       )}
-      <div
-        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 p-4`}
-      >
+      <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
         <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
           <div>
             <Breadcrumbs>
diff --git a/web/components/headers/projects.tsx b/web/components/headers/projects.tsx
index fa51493ed..0702ae22e 100644
--- a/web/components/headers/projects.tsx
+++ b/web/components/headers/projects.tsx
@@ -16,9 +16,7 @@ export const ProjectsHeader = observer(() => {
   const projectsList = workspaceSlug ? projectStore.projects[workspaceSlug.toString()] : [];
 
   return (
-    <div
-      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 p-4`}
-    >
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         <div>
           <Breadcrumbs>
@@ -43,7 +41,7 @@ export const ProjectsHeader = observer(() => {
           </div>
         )}
 
-        <Button prependIcon={<Plus />} size="md" onClick={() => commandPaletteStore.toggleCreateProjectModal(true)}>
+        <Button prependIcon={<Plus />} size="sm" onClick={() => commandPaletteStore.toggleCreateProjectModal(true)}>
           Add Project
         </Button>
       </div>
diff --git a/web/components/headers/user-profile.tsx b/web/components/headers/user-profile.tsx
index 70a3f40f5..1883e631f 100644
--- a/web/components/headers/user-profile.tsx
+++ b/web/components/headers/user-profile.tsx
@@ -17,9 +17,7 @@ export const UserProfileHeader: FC<IUserProfileHeader> = observer((props) => {
   const { workspaceSlug } = router.query;
 
   return (
-    <div
-      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 p-4`}
-    >
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         <div>
           <Breadcrumbs>
diff --git a/web/components/headers/workspace-analytics.tsx b/web/components/headers/workspace-analytics.tsx
index ea1cde066..e25fc6d5b 100644
--- a/web/components/headers/workspace-analytics.tsx
+++ b/web/components/headers/workspace-analytics.tsx
@@ -9,7 +9,7 @@ export const WorkspaceAnalyticsHeader = () => {
   return (
     <>
       <div
-        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 p-4`}
+        className={`relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4`}
       >
         <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
           <div className="block md:hidden">
diff --git a/web/components/headers/workspace-dashboard.tsx b/web/components/headers/workspace-dashboard.tsx
index 73d9dacab..76bd6bc30 100644
--- a/web/components/headers/workspace-dashboard.tsx
+++ b/web/components/headers/workspace-dashboard.tsx
@@ -7,6 +7,7 @@ import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 // components
 import { ProductUpdatesModal } from "components/common";
+import { Breadcrumbs } from "@plane/ui";
 
 export const WorkspaceDashboardHeader = () => {
   const [isProductUpdatesModalOpen, setIsProductUpdatesModalOpen] = useState(false);
@@ -16,25 +17,30 @@ export const WorkspaceDashboardHeader = () => {
   return (
     <>
       <ProductUpdatesModal isOpen={isProductUpdatesModalOpen} setIsOpen={setIsProductUpdatesModalOpen} />
-      <div
-        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 p-4`}
-      >
-        <div className="flex items-center gap-2 pl-3">
-          <LayoutGrid size={14} strokeWidth={2} />
-          Dashboard
+      <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
+        <div className="flex items-center gap-2 whitespace-nowrap overflow-ellipsis">
+          <div>
+            <Breadcrumbs>
+              <Breadcrumbs.BreadcrumbItem
+                type="text"
+                icon={<LayoutGrid className="h-4 w-4 text-custom-text-300" />}
+                label="Dashboard"
+              />
+            </Breadcrumbs>
+          </div>
         </div>
         <div className="flex items-center gap-3 px-3">
           <a
             href="https://plane.so/changelog"
             target="_blank"
             rel="noopener noreferrer"
-            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded"
+            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded flex-shrink-0"
           >
             <Zap size={14} strokeWidth={2} fill="rgb(var(--color-text-100))" />
             {"What's New?"}
           </a>
           <a
-            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded"
+            className="flex items-center gap-1.5 bg-custom-background-80 text-xs font-medium py-1.5 px-3 rounded flex-shrink-0"
             href="https://github.com/makeplane/plane"
             target="_blank"
             rel="noopener noreferrer"
diff --git a/web/components/headers/workspace-settings.tsx b/web/components/headers/workspace-settings.tsx
index 5dc156552..aff8925fd 100644
--- a/web/components/headers/workspace-settings.tsx
+++ b/web/components/headers/workspace-settings.tsx
@@ -20,9 +20,7 @@ export const WorkspaceSettingHeader: FC<IWorkspaceSettingHeader> = observer((pro
   const { workspaceSlug } = router.query;
 
   return (
-    <div
-      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 p-4`}
-    >
+    <div className="relative flex w-full flex-shrink-0 flex-row z-10 h-[3.75rem] items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex items-center gap-2 flex-grow w-full whitespace-nowrap overflow-ellipsis">
         <div>
           <Breadcrumbs>