From da5390fa0309f086711478f6f408550e563b4380 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 16 Jul 2025 01:03:31 +0530
Subject: [PATCH] [WEB-4497] chore: reduce breadcrumb height (#7413)

* chore: reduce breadcrumb height from 3.75rem to 3.25rem

* chore: code refactor

* chore: code refactor
---
 apps/admin/app/(all)/(dashboard)/header.tsx                   | 2 +-
 apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx         | 2 +-
 .../projects/(detail)/[projectId]/draft-issues/header.tsx     | 2 +-
 apps/web/core/components/core/app-header.tsx                  | 2 +-
 .../core/components/ui/loader/layouts/gantt-layout-loader.tsx | 4 ++--
 .../core/components/workspace-notifications/sidebar/root.tsx  | 2 +-
 packages/tailwind-config/tailwind.config.js                   | 3 +++
 7 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/apps/admin/app/(all)/(dashboard)/header.tsx b/apps/admin/app/(all)/(dashboard)/header.tsx
index 92bf10210..af7161c2d 100644
--- a/apps/admin/app/(all)/(dashboard)/header.tsx
+++ b/apps/admin/app/(all)/(dashboard)/header.tsx
@@ -72,7 +72,7 @@ export const AdminHeader: FC = observer(() => {
   const breadcrumbItems = generateBreadcrumbItems(pathName);
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-sidebar-border-200 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-header w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-sidebar-border-200 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <HamburgerToggle />
         {breadcrumbItems.length >= 0 && (
diff --git a/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx b/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
index cdce94f01..5554947be 100644
--- a/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
+++ b/apps/admin/app/(all)/(dashboard)/sidebar-dropdown.tsx
@@ -77,7 +77,7 @@ export const AdminSidebarDropdown = observer(() => {
   }, [csrfToken]);
 
   return (
-    <div className="flex max-h-[3.75rem] items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
+    <div className="flex max-h-header items-center gap-x-5 gap-y-2 border-b border-custom-sidebar-border-200 px-4 py-3.5">
       <div className="h-full w-full truncate">
         <div
           className={`flex flex-grow items-center gap-x-2 truncate rounded py-1 ${
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
index 2b8b63691..c50b90f1d 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/draft-issues/header.tsx
@@ -94,7 +94,7 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
   const issueCount = undefined;
 
   return (
-    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
+    <div className="relative z-10 flex h-header w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 bg-custom-sidebar-background-100 p-4">
       <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
         <div className="flex items-center gap-2.5">
           <Breadcrumbs isLoading={loader === "init-loader"}>
diff --git a/apps/web/core/components/core/app-header.tsx b/apps/web/core/components/core/app-header.tsx
index 1957f86b8..c911d9096 100644
--- a/apps/web/core/components/core/app-header.tsx
+++ b/apps/web/core/components/core/app-header.tsx
@@ -21,7 +21,7 @@ export const AppHeader = observer((props: AppHeaderProps) => {
 
   return (
     <div className="z-[18]">
-      <Row className="h-[3.75rem] flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
+      <Row className="h-header flex gap-2 w-full items-center border-b border-custom-border-200 bg-custom-sidebar-background-100">
         {sidebarCollapsed && <AppSidebarToggleButton />}
         <div className="w-full">{header}</div>
       </Row>
diff --git a/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx b/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
index 50a5ac56a..c658d1914 100644
--- a/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
+++ b/apps/web/core/components/ui/loader/layouts/gantt-layout-loader.tsx
@@ -17,7 +17,7 @@ export const GanttLayoutLoader = () => (
     </div>
     <div className="flex h-full">
       <div className="h-full w-[25.5rem] border-r border-custom-border-200">
-        <Row className="flex items-end h-[3.75rem] py-2 border-b border-custom-border-200">
+        <Row className="flex items-end h-header py-2 border-b border-custom-border-200">
           <div className="flex items-center justify-between w-full">
             <span className="h-5 w-14 bg-custom-background-80 rounded" />
             <span className="h-5 w-16 bg-custom-background-80 rounded" />
@@ -33,7 +33,7 @@ export const GanttLayoutLoader = () => (
         </Row>
       </div>
       <div className="h-full w-full border-r border-custom-border-200">
-        <div className="flex flex-col justify-between gap-2 h-[3.75rem] py-1.5 px-4 border-b border-custom-border-200">
+        <div className="flex flex-col justify-between gap-2 h-header py-1.5 px-4 border-b border-custom-border-200">
           <div className="flex items-center justify-start">
             <span className="h-5 w-20 bg-custom-background-80 rounded" />
           </div>
diff --git a/apps/web/core/components/workspace-notifications/sidebar/root.tsx b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
index 95d70d8fa..0439d5cda 100644
--- a/apps/web/core/components/workspace-notifications/sidebar/root.tsx
+++ b/apps/web/core/components/workspace-notifications/sidebar/root.tsx
@@ -58,7 +58,7 @@ export const NotificationsSidebarRoot: FC = observer(() => {
       )}
     >
       <div className="relative w-full h-full flex flex-col">
-        <Row className="h-[3.75rem] border-b border-custom-border-200 flex">
+        <Row className="h-header border-b border-custom-border-200 flex flex-shrink-0">
           <NotificationSidebarHeader workspaceSlug={workspaceSlug.toString()} />
         </Row>
 
diff --git a/packages/tailwind-config/tailwind.config.js b/packages/tailwind-config/tailwind.config.js
index a1ab06c89..8226013aa 100644
--- a/packages/tailwind-config/tailwind.config.js
+++ b/packages/tailwind-config/tailwind.config.js
@@ -396,6 +396,9 @@ module.exports = {
         80: "18rem",
         96: "21.6rem",
       },
+      height: {
+        header: "3.25rem",
+      },
       space: {
         0: "0",
         0.5: "0.1125rem",