[WEB-2273] Chore: page alignments (#5505)

* chore: headers + common containers * fix: filters code splitting * fix: home header * fix: header changes * chore: page alignments fixed * fix: uncommented filters * fix: used enums * fix: cards + filters * fix: enum changes * fix: reverted package changes * fix: reverted package changes * fix: Card + tags seperated + naming fixed * fix: card + tags seperated + naming fixed * fix: mobile headers fixed partially * fix: build errors + minor css * fix: checkbox spacing * fix: review changes * fix: lint errors * fix: minor review changes
2024-09-05 12:16:24 +05:30 · 2024-09-05 12:16:24 +05:30 · 87dbb9b888
commit 87dbb9b888
parent c78b2344b8
181 changed files with 1323 additions and 1122 deletions
--- a/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/active-cycles/header.tsx
@ -2,15 +2,15 @@

 import { observer } from "mobx-react";
 // ui
-import { Breadcrumbs, ContrastIcon, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, ContrastIcon, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // plane web components
 import { UpgradeBadge } from "@/plane-web/components/workspace";

 export const WorkspaceActiveCycleHeader = observer(() => (
-  <CustomHeader>
-    <CustomHeader.LeftItem>
+  <Header>
+    <Header.LeftItem>
      <Breadcrumbs>
        <Breadcrumbs.BreadcrumbItem
          type="text"
@ -23,6 +23,6 @@ export const WorkspaceActiveCycleHeader = observer(() => (
        />
      </Breadcrumbs>
      <UpgradeBadge size="md" />
-    </CustomHeader.LeftItem>
-  </CustomHeader>
+    </Header.LeftItem>
+  </Header>
 ));
--- a/web/app/[workspaceSlug]/(projects)/analytics/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/analytics/header.tsx
@ -6,7 +6,7 @@ import { useSearchParams } from "next/navigation";
 // icons
 import { BarChart2, PanelRight } from "lucide-react";
 // ui
-import { Breadcrumbs, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // helpers
@ -36,8 +36,8 @@ export const WorkspaceAnalyticsHeader = observer(() => {
  }, [toggleWorkspaceAnalyticsSidebar, workspaceAnalyticsSidebarCollapsed]);

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <Breadcrumbs>
          <Breadcrumbs.BreadcrumbItem
            type="text"
@ -61,7 +61,7 @@ export const WorkspaceAnalyticsHeader = observer(() => {
        ) : (
          <></>
        )}
-      </CustomHeader.LeftItem>
-    </CustomHeader>
+      </Header.LeftItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/analytics/page.tsx
@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useSearchParams } from "next/navigation";
 import { Tab } from "@headlessui/react";
 // components
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { CustomAnalytics, ScopeAndDemand } from "@/components/analytics";
 import { PageHead } from "@/components/core";
 import { EmptyState } from "@/components/empty-state";
@ -35,7 +35,7 @@ const AnalyticsPage = observer(() => {
          {workspaceProjectIds.length > 0 || loader ? (
            <div className="flex h-full flex-col overflow-hidden bg-custom-background-100">
              <Tab.Group as={Fragment} defaultIndex={analytics_tab === "custom" ? 1 : 0}>
-                <CustomHeader variant={EHeaderVariant.SECONDARY}>
+                <Header variant={EHeaderVariant.SECONDARY}>
                  <Tab.List as="div" className="flex space-x-2 border-b h-[50px] border-custom-border-200">
                    {ANALYTICS_TABS.map((tab) => (
                      <Tab key={tab.key} as={Fragment}>
@ -54,7 +54,7 @@ const AnalyticsPage = observer(() => {
                      </Tab>
                    ))}
                  </Tab.List>
-                </CustomHeader>
+                </Header>
                <Tab.Panels as={Fragment}>
                  <Tab.Panel as={Fragment}>
                    <ScopeAndDemand fullScreen />
--- a/web/app/[workspaceSlug]/(projects)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/header.tsx
@ -7,7 +7,7 @@ import { Home } from "lucide-react";
 import githubBlackImage from "/public/logos/github-black.png";
 import githubWhiteImage from "/public/logos/github-white.png";
 // ui
-import { Breadcrumbs, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // constants
@ -22,8 +22,8 @@ export const WorkspaceDashboardHeader = () => {

  return (
    <>
-      <CustomHeader>
-        <CustomHeader.LeftItem>
+      <Header>
+        <Header.LeftItem>
          <div>
            <Breadcrumbs>
              <Breadcrumbs.BreadcrumbItem
@ -32,8 +32,8 @@ export const WorkspaceDashboardHeader = () => {
              />
            </Breadcrumbs>
          </div>
-        </CustomHeader.LeftItem>
-        <CustomHeader.RightItem>
+        </Header.LeftItem>
+        <Header.RightItem>
          <a
            onClick={() =>
              captureEvent(GITHUB_REDIRECTED, {
@ -53,8 +53,8 @@ export const WorkspaceDashboardHeader = () => {
            />
            <span className="hidden text-xs font-medium sm:hidden md:block">Star us on GitHub</span>
          </a>
-        </CustomHeader.RightItem>
-      </CustomHeader>
+        </Header.RightItem>
+      </Header>
    </>
  );
 };
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/header.tsx
@ -7,7 +7,7 @@ import Link from "next/link";
 import { useParams } from "next/navigation";
 import { ChevronDown, PanelRight } from "lucide-react";
 import { IUserProfileProjectSegregation } from "@plane/types";
-import { Breadcrumbs, CustomHeader, CustomMenu, UserActivityIcon } from "@plane/ui";
+import { Breadcrumbs, Header, CustomMenu, UserActivityIcon } from "@plane/ui";
 import { BreadcrumbLink } from "@/components/common";
 // components
 import { ProfileIssuesFilter } from "@/components/profile";
@ -46,8 +46,8 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
  const breadcrumbLabel = `${isCurrentUser ? "Your" : userName} Work`;

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <div className="flex w-full justify-between">
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
@ -68,7 +68,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
              className="flex flex-grow justify-center text-sm text-custom-text-200"
              placement="bottom-start"
              customButton={
-                <div className="flex items-center gap-2 rounded-md border border-custom-border-400 px-2 py-1.5">
+                <div className="flex items-center gap-2 rounded-md border border-custom-border-200 px-2 py-1.5">
                  <span className="flex flex-grow justify-center text-sm text-custom-text-200">{type}</span>
                  <ChevronDown className="h-4 w-4 text-custom-text-400" />
                </div>
@ -104,7 +104,7 @@ export const UserProfileHeader: FC<TUserProfileHeader> = observer((props) => {
            </button>
          </div>
        </div>
-      </CustomHeader.LeftItem>
-    </CustomHeader>
+      </Header.LeftItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/mobile-header.tsx
@ -8,7 +8,7 @@ import { ChevronDown } from "lucide-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions, TIssueLayouts } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu, Row } from "@plane/ui";
 // components
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues";
 // constants
@ -109,13 +109,18 @@ export const ProfileIssuesMobileHeader = observer(() => {
  );

  return (
-    <div className="flex justify-evenly border-b border-custom-border-200 py-2 md:hidden">
+    <div className="flex justify-start border-b border-custom-border-200 py-2 md:hidden">
      <CustomMenu
        maxHeight={"md"}
-        className="flex flex-grow justify-center text-sm text-custom-text-200"
+        className="flex justify-center text-sm text-custom-text-200"
        placement="bottom-start"
-        customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
-        customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
+        customButton={
+          <Row className="flex flex-start text-sm text-custom-text-200">
+            Layout
+            <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
+          </Row>
+        }
+        customButtonClassName="flex flex-start text-custom-text-200 text-sm"
        closeOnSelect
      >
        {ISSUE_LAYOUTS.map((layout, index) => {
@ -134,15 +139,15 @@ export const ProfileIssuesMobileHeader = observer(() => {
          );
        })}
      </CustomMenu>
-      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+      <div className="flex items-center justify-start border-l border-custom-border-200 text-sm text-custom-text-200">
        <FiltersDropdown
          title="Filters"
          placement="bottom-end"
          menuButton={
-            <span className="flex items-center text-sm text-custom-text-200">
+            <Row className="flex flex-start text-sm text-custom-text-200">
              Filters
-              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" />
-            </span>
+              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200" strokeWidth={1} />
+            </Row>
          }
          isFiltersApplied={isIssueFilterActive(issueFilters)}
        >
@ -160,15 +165,15 @@ export const ProfileIssuesMobileHeader = observer(() => {
          />
        </FiltersDropdown>
      </div>
-      <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+      <div className="flex items-center justify-start border-l border-custom-border-200 text-sm text-custom-text-200">
        <FiltersDropdown
          title="Display"
          placement="bottom-end"
          menuButton={
-            <span className="flex items-center text-sm text-custom-text-200">
+            <Row className="flex flex-start text-sm text-custom-text-200">
              Display
-              <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
-            </span>
+              <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={1} />
+            </Row>
          }
        >
          <DisplayFiltersSelection
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/navbar.tsx
@ -5,7 +5,7 @@ import { useParams, usePathname } from "next/navigation";

 // components
 // constants
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { PROFILE_ADMINS_TAB, PROFILE_VIEWER_TAB } from "@/constants/profile";

 type Props = {
@ -21,7 +21,7 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
  const tabsList = isAuthorized ? [...PROFILE_VIEWER_TAB, ...PROFILE_ADMINS_TAB] : PROFILE_VIEWER_TAB;

  return (
-    <CustomHeader variant={EHeaderVariant.SECONDARY} className="sticky -top-0.5 hidden md:flex md:static">
+    <Header variant={EHeaderVariant.SECONDARY} showOnMobile={false}>
      <div className="flex items-center overflow-x-scroll">
        {tabsList.map((tab) => (
          <Link key={tab.route} href={`/${workspaceSlug}/profile/${userId}/${tab.route}`}>
@ -37,6 +37,6 @@ export const ProfileNavbar: React.FC<Props> = (props) => {
          </Link>
        ))}
      </div>
-    </CustomHeader>
+    </Header>
  );
 };
--- a/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/profile/[userId]/page.tsx
@ -5,6 +5,7 @@ import useSWR from "swr";
 // types
 import { IUserStateDistribution, TStateGroups } from "@plane/types";
 // components
+import { ContentWrapper } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import {
  ProfileActivity,
@ -40,7 +41,7 @@ export default function ProfileOverviewPage() {
  return (
    <>
      <PageHead title="Your work" />
-      <div className="h-full w-full space-y-7 overflow-y-auto px-5 py-5 md:px-9 vertical-scrollbar scrollbar-md">
+      <ContentWrapper className="space-y-7">
        <ProfileStats userProfile={userProfile} />
        <ProfileWorkload stateDistribution={stateDistribution} />
        <div className="grid grid-cols-1 items-stretch gap-5 xl:grid-cols-2">
@ -48,7 +49,7 @@ export default function ProfileOverviewPage() {
          <ProfileStateDistribution stateDistribution={stateDistribution} userProfile={userProfile} />
        </div>
        <ProfileActivity />
-      </div>
+      </ContentWrapper>
    </>
  );
 }
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/header.tsx
@ -4,7 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { ArchiveIcon, Breadcrumbs, Tooltip, CustomHeader } from "@plane/ui";
+import { ArchiveIcon, Breadcrumbs, Tooltip, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 // constants
@ -38,8 +38,8 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
    PROJECT_ARCHIVES_BREADCRUMB_LIST[activeTab as keyof typeof PROJECT_ARCHIVES_BREADCRUMB_LIST];

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <div className="flex items-center gap-2.5">
          <Breadcrumbs onBack={router.back} isLoading={loader}>
            <Breadcrumbs.BreadcrumbItem
@ -92,7 +92,7 @@ export const ProjectArchivesHeader: FC<TProps> = observer((props: TProps) => {
            </Tooltip>
          ) : null}
        </div>
-      </CustomHeader.LeftItem>
-    </CustomHeader>
+      </Header.LeftItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/archives/issues/(detail)/header.tsx
@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
 // ui
-import { ArchiveIcon, Breadcrumbs, LayersIcon, CustomHeader } from "@plane/ui";
+import { ArchiveIcon, Breadcrumbs, LayersIcon, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { IssueDetailQuickActions } from "@/components/issues";
@ -36,8 +36,8 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
  );

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <Breadcrumbs isLoading={loader}>
          <Breadcrumbs.BreadcrumbItem
            type="text"
@ -88,14 +88,14 @@ export const ProjectArchivedIssueDetailsHeader = observer(() => {
            }
          />
        </Breadcrumbs>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
        <IssueDetailQuickActions
          workspaceSlug={workspaceSlug.toString()}
          projectId={projectId.toString()}
          issueId={archivedIssueId.toString()}
        />
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@ -9,7 +9,7 @@ import { ArrowRight, PanelRight } from "lucide-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip, Header } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
 import { BreadcrumbLink, Logo } from "@/components/common";
@ -161,8 +161,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
        onClose={() => setAnalyticsModal(false)}
        cycleDetails={cycleDetails ?? undefined}
      />
-      <CustomHeader>
-        <CustomHeader.LeftItem>
+      <Header>
+        <Header.LeftItem>
          <div className="flex items-center gap-2">
            <Breadcrumbs onBack={router.back} isLoading={loader}>
              <Breadcrumbs.BreadcrumbItem
@ -235,8 +235,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
              />
            </Breadcrumbs>
          </div>
-        </CustomHeader.LeftItem>
-        <CustomHeader.RightItem>
+        </Header.LeftItem>
+        <Header.RightItem>
          <div className="hidden items-center gap-2 md:flex ">
            <LayoutSelection
              layouts={[
@ -317,8 +317,8 @@ export const CycleIssuesHeader: React.FC = observer(() => {
          >
            <PanelRight className={cn("h-4 w-4", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")} />
          </button>
-        </CustomHeader.RightItem>
-      </CustomHeader>
+        </Header.RightItem>
+      </Header>
    </>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx
@ -4,7 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { Breadcrumbs, Button, ContrastIcon, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { CyclesViewHeader } from "@/components/cycles";
@ -30,8 +30,8 @@ export const CyclesListHeader: FC = observer(() => {
    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <Breadcrumbs onBack={router.back} isLoading={loader}>
          <Breadcrumbs.BreadcrumbItem
            type="text"
@ -54,8 +54,8 @@ export const CyclesListHeader: FC = observer(() => {
            link={<BreadcrumbLink label="Cycles" icon={<ContrastIcon className="h-4 w-4 text-custom-text-300" />} />}
          />
        </Breadcrumbs>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
        {canUserCreateCycle && currentProjectDetails ? (
          <div className="flex items-center gap-3">
            <CyclesViewHeader projectId={currentProjectDetails.id} />
@ -73,7 +73,7 @@ export const CyclesListHeader: FC = observer(() => {
        ) : (
          <></>
        )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/page.tsx
@ -6,7 +6,7 @@ import { useParams } from "next/navigation";
 // types
 import { TCycleFilters } from "@plane/types";
 // components
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import { CyclesView, CycleCreateUpdateModal, CycleAppliedFiltersList } from "@/components/cycles";
 import { EmptyState } from "@/components/empty-state";
@ -82,13 +82,13 @@ const ProjectCyclesPage = observer(() => {
        ) : (
          <>
            {calculateTotalFilters(currentProjectFilters ?? {}) !== 0 && (
-              <CustomHeader variant={EHeaderVariant.TERNARY}>
+              <Header variant={EHeaderVariant.TERNARY}>
                <CycleAppliedFiltersList
                  appliedFilters={currentProjectFilters ?? {}}
                  handleClearAllFilters={() => clearAllFilters(projectId.toString())}
                  handleRemoveFilter={handleRemoveFilter}
                />
-              </CustomHeader>
+              </Header>
            )}

            <CyclesView workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/inbox/header.tsx
@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { RefreshCcw } from "lucide-react";
 // ui
-import { Breadcrumbs, Button, Intake, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, Intake, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { InboxIssueCreateEditModalRoot } from "@/components/inbox";
@ -30,8 +30,8 @@ export const ProjectInboxHeader: FC = observer(() => {
  const isViewer = currentProjectRole === EUserProjectRoles.VIEWER;

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <div className="flex items-center gap-4">
          <Breadcrumbs isLoading={currentProjectDetailsLoader}>
            <Breadcrumbs.BreadcrumbItem
@ -64,8 +64,8 @@ export const ProjectInboxHeader: FC = observer(() => {
            </div>
          )}
        </div>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
        {currentProjectDetails?.inbox_view && workspaceSlug && projectId && !isViewer ? (
          <div className="flex items-center gap-2">
            <InboxIssueCreateEditModalRoot
@ -83,7 +83,7 @@ export const ProjectInboxHeader: FC = observer(() => {
        ) : (
          <></>
        )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(detail)/header.tsx
@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { PanelRight } from "lucide-react";
 // ui
-import { Breadcrumbs, LayersIcon, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, LayersIcon, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { IssueDetailQuickActions } from "@/components/issues";
@ -29,8 +29,8 @@ export const ProjectIssueDetailsHeader = observer(() => {
  const isSidebarCollapsed = issueDetailSidebarCollapsed;

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <div>
          <Breadcrumbs onBack={router.back} isLoading={loader}>
            <Breadcrumbs.BreadcrumbItem
@ -75,8 +75,8 @@ export const ProjectIssueDetailsHeader = observer(() => {
            />
          </Breadcrumbs>
        </div>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
        <IssueDetailQuickActions
          workspaceSlug={workspaceSlug.toString()}
          projectId={projectId.toString()}
@ -87,7 +87,7 @@ export const ProjectIssueDetailsHeader = observer(() => {
            className={cn("h-4 w-4 ", !isSidebarCollapsed ? "text-custom-primary-100" : " text-custom-text-200")}
          />
        </button>
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/header.tsx
@ -5,7 +5,7 @@ import { useParams } from "next/navigation";
 // icons
 import { Briefcase, Circle, ExternalLink } from "lucide-react";
 // ui
-import { Breadcrumbs, Button, LayersIcon, Tooltip, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, LayersIcon, Tooltip, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, CountChip, Logo } from "@/components/common";
 // constants
@ -46,8 +46,8 @@ export const ProjectIssuesHeader = observer(() => {
    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <div className="flex items-center gap-2.5">
          <Breadcrumbs onBack={() => router.back()} isLoading={loader}>
            <Breadcrumbs.BreadcrumbItem
@ -102,8 +102,8 @@ export const ProjectIssuesHeader = observer(() => {
        ) : (
          <></>
        )}
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
        <div className="hidden gap-3 md:flex">
          <HeaderFilters
            projectId={projectId}
@ -125,7 +125,7 @@ export const ProjectIssuesHeader = observer(() => {
        ) : (
          <></>
        )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/issues/(list)/mobile-header.tsx
@ -8,7 +8,7 @@ import { Calendar, ChevronDown, Kanban, List } from "lucide-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { CustomMenu } from "@plane/ui";
+import { CustomMenu, Row } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues/issue-layouts";
@ -106,7 +106,12 @@ export const ProjectIssuesMobileHeader = observer(() => {
          maxHeight={"md"}
          className="flex flex-grow justify-center text-sm text-custom-text-200"
          placement="bottom-start"
-          customButton={<span className="flex flex-grow justify-center text-sm text-custom-text-200">Layout</span>}
+          customButton={
+            <Row className="flex flex-start text-sm text-custom-text-200">
+              Layout
+              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
+            </Row>
+          }
          customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
          closeOnSelect
        >
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@ -9,7 +9,7 @@ import { ArrowRight, PanelRight } from "lucide-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip, Header } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
 import { BreadcrumbLink, Logo } from "@/components/common";
@ -161,8 +161,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
        onClose={() => setAnalyticsModal(false)}
        moduleDetails={moduleDetails ?? undefined}
      />
-      <CustomHeader>
-        <CustomHeader.LeftItem>
+      <Header>
+        <Header.LeftItem>
          <Breadcrumbs onBack={router.back} isLoading={loader}>
            <Breadcrumbs.BreadcrumbItem
              type="text"
@ -233,8 +233,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
              }
            />
          </Breadcrumbs>
-        </CustomHeader.LeftItem>
-        <CustomHeader.RightItem>
+        </Header.LeftItem>
+        <Header.RightItem>
          <div className="hidden gap-2 md:flex">
            <LayoutSelection
              layouts={[
@ -317,8 +317,8 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
              className={cn("block h-4 w-4 md:hidden", !isSidebarCollapsed ? "text-[#3E63DD]" : "text-custom-text-200")}
            />
          </button>
-        </CustomHeader.RightItem>
-      </CustomHeader>
+        </Header.RightItem>
+      </Header>
    </>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/header.tsx
@ -3,7 +3,7 @@
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
-import { Breadcrumbs, Button, DiceIcon, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, DiceIcon, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { ModuleViewHeader } from "@/components/modules";
@ -30,8 +30,8 @@ export const ModulesListHeader: React.FC = observer(() => {
    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <div>
          <Breadcrumbs onBack={router.back} isLoading={loader}>
            <Breadcrumbs.BreadcrumbItem
@ -56,8 +56,8 @@ export const ModulesListHeader: React.FC = observer(() => {
            />
          </Breadcrumbs>
        </div>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
        <ModuleViewHeader />
        {canUserCreateModule ? (
          <Button
@ -73,7 +73,7 @@ export const ModulesListHeader: React.FC = observer(() => {
        ) : (
          <></>
        )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx
@ -1,7 +1,8 @@
 "use client";

 import { observer } from "mobx-react";
-import { CustomMenu } from "@plane/ui";
+import { ChevronDown } from "lucide-react";
+import { CustomMenu, Row } from "@plane/ui";
 import { MODULE_VIEW_LAYOUTS } from "@/constants/module";
 import { useModuleFilter, useProject } from "@/hooks/store";

@ -10,12 +11,16 @@ export const ModulesListMobileHeader = observer(() => {
  const { updateDisplayFilters } = useModuleFilter();

  return (
-    <div className="flex justify-center md:hidden">
+    <div className="flex justify-start md:hidden">
      <CustomMenu
        maxHeight={"md"}
-        className="flex flex-grow justify-center text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
+        className="flex flex-grow justify-start text-custom-text-200 text-sm py-2 border-b border-custom-border-200 bg-custom-sidebar-background-100"
        // placement="bottom-start"
-        customButton={<span className="flex flex-grow justify-center text-custom-text-200 text-sm">Layout</span>}
+        customButton={
+          <Row className="flex flex-grow justify-start text-custom-text-200 text-sm gap-2">
+            <span>Layout</span> <ChevronDown className="h-4 w-4 text-custom-text-200 my-auto" strokeWidth={1} />
+          </Row>
+        }
        customButtonClassName="flex flex-grow justify-center items-center text-custom-text-200 text-sm"
        closeOnSelect
      >
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/header.tsx
@ -7,15 +7,7 @@ import { FileText } from "lucide-react";
 // types
 import { TLogoProps } from "@plane/types";
 // ui
-import {
-  Breadcrumbs,
-  EmojiIconPicker,
-  EmojiIconPickerTypes,
-  TOAST_TYPE,
-  Tooltip,
-  setToast,
-  CustomHeader,
-} from "@plane/ui";
+import { Breadcrumbs, EmojiIconPicker, EmojiIconPickerTypes, TOAST_TYPE, Tooltip, setToast, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { PageEditInformationPopover } from "@/components/pages";
@ -67,8 +59,8 @@ export const PageDetailsHeader = observer(() => {
  const pageTitle = getPageName(name);

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <div>
          <Breadcrumbs isLoading={loader}>
            <Breadcrumbs.BreadcrumbItem
@ -166,11 +158,11 @@ export const PageDetailsHeader = observer(() => {
            />
          </Breadcrumbs>
        </div>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
        <PageEditInformationPopover page={page} />
        <PageDetailsHeaderExtraActions />
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx
@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { useParams, useSearchParams } from "next/navigation";
 import { FileText } from "lucide-react";
 // ui
-import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, Header } from "@plane/ui";
 // helpers
 import { BreadcrumbLink, Logo } from "@/components/common";
 // constants
@ -30,8 +30,8 @@ export const PagesListHeader = observer(() => {
    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <div>
          <Breadcrumbs isLoading={loader}>
            <Breadcrumbs.BreadcrumbItem
@ -56,8 +56,8 @@ export const PagesListHeader = observer(() => {
            />
          </Breadcrumbs>
        </div>
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
        {canUserCreatePage ? (
          <div className="flex items-center gap-2">
            <Button
@ -77,7 +77,7 @@ export const PagesListHeader = observer(() => {
        ) : (
          <></>
        )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/header.tsx
@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // ui
 import { Settings } from "lucide-react";
-import { Breadcrumbs, CustomMenu, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, CustomMenu, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 // constants
@ -29,8 +29,8 @@ export const ProjectSettingHeader: FC = observer(() => {
  const projectMemberInfo = currentProjectRole || EUserProjectRoles.GUEST;

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <div>
          <div className="z-50">
            <Breadcrumbs onBack={router.back} isLoading={loader}>
@ -84,7 +84,7 @@ export const ProjectSettingHeader: FC = observer(() => {
              )
          )}
        </CustomMenu>
-      </CustomHeader.LeftItem>
-    </CustomHeader>
+      </Header.LeftItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/labels/page.tsx
@ -42,7 +42,7 @@ const LabelsSettingsPage = observer(() => {
  return (
    <>
      <PageHead title={pageTitle} />
-      <div ref={scrollableContainerRef} className="h-full w-full gap-10 overflow-y-auto py-8 pr-9">
+      <div ref={scrollableContainerRef} className="h-full w-full gap-10 overflow-y-auto py-2 pr-9">
        <ProjectSettingsLabelList />
      </div>
    </>
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(detail)/[viewId]/header.tsx
@ -8,7 +8,7 @@ import { Layers, Lock } from "lucide-react";
 // types
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { Breadcrumbs, Button, CustomMenu, Tooltip, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, CustomMenu, Tooltip, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "@/components/issues";
@ -136,8 +136,8 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
  const publishLink = getPublishViewLink(viewDetails?.anchor);

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <Breadcrumbs isLoading={loader}>
          <Breadcrumbs.BreadcrumbItem
            type="text"
@ -231,8 +231,8 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
        ) : (
          <></>
        )}
-      </CustomHeader.LeftItem>
-      <CustomHeader.RightItem>
+      </Header.LeftItem>
+      <Header.RightItem>
        {!viewDetails?.is_locked ? (
          <>
            <LayoutSelection
@ -298,7 +298,7 @@ export const ProjectViewIssuesHeader: React.FC = observer(() => {
        ) : (
          <></>
        )}
-      </CustomHeader.RightItem>
-    </CustomHeader>
+      </Header.RightItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/header.tsx
@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Layers } from "lucide-react";
 // ui
-import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink, Logo } from "@/components/common";
 import { ViewListHeader } from "@/components/views";
@ -20,8 +20,8 @@ export const ProjectViewsHeader = observer(() => {

  return (
    <>
-      <CustomHeader>
-        <CustomHeader.LeftItem>
+      <Header>
+        <Header.LeftItem>
          <Breadcrumbs isLoading={loader}>
            <Breadcrumbs.BreadcrumbItem
              type="text"
@ -44,16 +44,16 @@ export const ProjectViewsHeader = observer(() => {
              link={<BreadcrumbLink label="Views" icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
            />
          </Breadcrumbs>
-        </CustomHeader.LeftItem>
-        <CustomHeader.RightItem>
+        </Header.LeftItem>
+        <Header.RightItem>
          <ViewListHeader />
          <div>
            <Button variant="primary" size="sm" onClick={() => toggleCreateViewModal(true)}>
              Add view
            </Button>
          </div>
-        </CustomHeader.RightItem>
-      </CustomHeader>
+        </Header.RightItem>
+      </Header>
    </>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx
@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 // icons
 import { ChevronDown, ListFilter } from "lucide-react";
 // components
+import { Row } from "@plane/ui";
 import { FiltersDropdown } from "@/components/issues/issue-layouts";
 import { ViewFiltersSelection } from "@/components/views/filters/filter-selection";
 import { ViewOrderByDropdown } from "@/components/views/filters/order-by";
@ -20,7 +21,7 @@ export const ViewMobileHeader = observer(() => {
  return (
    <>
      <div className="md:hidden flex justify-evenly border-b border-custom-border-200 py-2 z-[13] bg-custom-background-100">
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        <Row className="flex items-center justify-start border-l border-custom-border-200 text-sm text-custom-text-200">
          <ViewOrderByDropdown
            sortBy={filters.sortBy}
            sortKey={filters.sortKey}
@ -30,18 +31,18 @@ export const ViewMobileHeader = observer(() => {
            }}
            isMobile
          />
-        </div>
-        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
+        </Row>
+        <div className="flex flex-grow items-center justify-start border-l border-custom-border-200 text-sm text-custom-text-200">
          <FiltersDropdown
            icon={<ListFilter className="h-3 w-3" />}
            title="Filters"
            placement="bottom-end"
            isFiltersApplied={false}
            menuButton={
-              <span className="flex items-center text-sm text-custom-text-200">
+              <Row className="flex items-center text-sm text-custom-text-200">
                Filters
-                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" />
-              </span>
+                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={1} />
+              </Row>
            }
          >
            <ViewFiltersSelection
--- a/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/page.tsx
@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // components
 import { TViewFilterProps } from "@plane/types";
-import { CustomHeader, EHeaderVariant } from "@plane/ui";
+import { Header, EHeaderVariant } from "@plane/ui";
 import { PageHead } from "@/components/core";
 import { EmptyState } from "@/components/empty-state";
 import { ProjectViewsList } from "@/components/views";
@ -63,14 +63,14 @@ const ProjectViewsPage = observer(() => {
    <>
      <PageHead title={pageTitle} />
      {isFiltersApplied && (
-        <CustomHeader variant={EHeaderVariant.TERNARY}>
+        <Header variant={EHeaderVariant.TERNARY}>
          <ViewAppliedFiltersList
            appliedFilters={filters.filters ?? {}}
            handleClearAllFilters={clearAllFilters}
            handleRemoveFilter={handleRemoveFilter}
            alwaysAllowEditing
          />
-        </CustomHeader>
+        </Header>
      )}
      <ProjectViewsList />
    </>
--- a/web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/api-tokens/page.tsx
@ -54,7 +54,7 @@ const ApiTokensPage = observer(() => {
    <>
      <PageHead title={pageTitle} />
      <CreateApiTokenModal isOpen={isCreateTokenModalOpen} onClose={() => setIsCreateTokenModalOpen(false)} />
-      <section className="w-full overflow-y-auto md:pr-9 pr-4">
+      <section className="w-full overflow-y-auto">
        {tokens.length > 0 ? (
          <>
            <div className="flex items-center justify-between border-b border-custom-border-200 py-3.5">
--- a/web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/exports/page.tsx
@ -31,11 +31,11 @@ const ExportsPage = observer(() => {
    <>
      <PageHead title={pageTitle} />
      <div
-        className={cn("w-full overflow-y-auto md:pr-9 pr-4", {
+        className={cn("w-full overflow-y-auto", {
          "opacity-60": !canPerformWorkspaceMemberActions,
        })}
      >
-        <div className="flex items-center border-b border-custom-border-100 py-3.5">
+        <div className="flex items-center border-b border-custom-border-100 pb-3.5">
          <h3 className="text-xl font-medium">Exports</h3>
        </div>
        <ExportGuide />
--- a/web/app/[workspaceSlug]/(projects)/settings/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/header.tsx
@ -4,7 +4,7 @@ import { FC } from "react";
 import { observer } from "mobx-react";
 import { Settings } from "lucide-react";
 // ui
-import { Breadcrumbs, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 // hooks
@ -14,8 +14,8 @@ export const WorkspaceSettingHeader: FC = observer(() => {
  const { currentWorkspace, loader } = useWorkspace();

  return (
-    <CustomHeader>
-      <CustomHeader.LeftItem>
+    <Header>
+      <Header.LeftItem>
        <Breadcrumbs isLoading={loader}>
          <Breadcrumbs.BreadcrumbItem
            type="text"
@ -29,7 +29,7 @@ export const WorkspaceSettingHeader: FC = observer(() => {
          />
          <Breadcrumbs.BreadcrumbItem type="text" link={<BreadcrumbLink label="Settings" />} />
        </Breadcrumbs>
-      </CustomHeader.LeftItem>
-    </CustomHeader>
+      </Header.LeftItem>
+    </Header>
  );
 });
--- a/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/imports/page.tsx
@ -33,8 +33,8 @@ const ImportsPage = observer(() => {
  return (
    <>
      <PageHead title={pageTitle} />
-      <section className="w-full overflow-y-auto py-8 pr-9">
-        <div className="flex items-center border-b border-custom-border-100 py-3.5">
+      <section className="w-full overflow-y-auto">
+        <div className="flex items-center border-b border-custom-border-100 pb-3.5">
          <h3 className="text-xl font-medium">Imports</h3>
        </div>
        <IntegrationGuide />
--- a/web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/integrations/page.tsx
@ -1,4 +1,4 @@
-"use client"
+"use client";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import useSWR from "swr";
@ -33,7 +33,7 @@ const WorkspaceIntegrationsPage = observer(() => {
    return (
      <>
        <PageHead title={pageTitle} />
-        <div className="mt-10 flex h-full w-full justify-center p-4">
+        <div className="mt-10 flex h-full w-full justify-center">
          <p className="text-sm text-custom-text-300">You are not authorized to access this page.</p>
        </div>
      </>
@ -46,7 +46,7 @@ const WorkspaceIntegrationsPage = observer(() => {
  return (
    <>
      <PageHead title={pageTitle} />
-      <section className="w-full overflow-y-auto py-8 pr-9">
+      <section className="w-full overflow-y-auto">
        <IntegrationAndImportExportBanner bannerName="Integrations" />
        <div>
          {appIntegrations ? (
@ -62,4 +62,4 @@ const WorkspaceIntegrationsPage = observer(() => {
  );
 });

-export default WorkspaceIntegrationsPage;
+export default WorkspaceIntegrationsPage;
--- a/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/layout.tsx
@ -2,7 +2,8 @@

 import { ReactNode } from "react";
 // components
-import { AppHeader, ContentWrapper } from "@/components/core";
+import { ContentWrapper } from "@plane/ui";
+import { AppHeader } from "@/components/core";
 // local components
 import { WorkspaceSettingHeader } from "./header";
 import { MobileWorkspaceSettingsTabs } from "./mobile-header-tabs";
@ -18,17 +19,13 @@ export default function WorkspaceSettingLayout(props: IWorkspaceSettingLayout) {
  return (
    <>
      <AppHeader header={<WorkspaceSettingHeader />} />
-      <ContentWrapper>
-        <div className="inset-y-0 z-20 flex h-full w-full gap-2">
-          <div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
-            <WorkspaceSettingsSidebar />
-          </div>
-          <div className="flex flex-col relative w-full overflow-hidden">
-            <MobileWorkspaceSettingsTabs />
-            <div className="w-full pl-4 md:pl-0 md:py-8 py-2 overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">
-              {children}
-            </div>
-          </div>
+      <MobileWorkspaceSettingsTabs />
+      <ContentWrapper className="flex-row inset-y-0 gap-4">
+        <div className="w-80 flex-shrink-0 overflow-y-hidden sm:hidden hidden md:block lg:block">
+          <WorkspaceSettingsSidebar />
+        </div>
+        <div className="flex flex-col relative w-full overflow-hidden">
+          <div className="w-full overflow-x-hidden overflow-y-scroll vertical-scrollbar scrollbar-md">{children}</div>
        </div>
      </ContentWrapper>
    </>
--- a/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/members/page.tsx
@ -99,11 +99,11 @@ const WorkspaceMembersSettingsPage = observer(() => {
        onSubmit={handleWorkspaceInvite}
      />
      <section
-        className={cn("w-full overflow-y-auto md:pr-9 pr-4", {
+        className={cn("w-full overflow-y-auto", {
          "opacity-60": !canPerformWorkspaceMemberActions,
        })}
      >
-        <div className="flex items-center justify-between gap-4 py-3.5">
+        <div className="flex items-center justify-between gap-4 pb-3.5">
          <h4 className="text-xl font-medium">Members</h4>
          <div className="ml-auto flex items-center gap-1.5 rounded-md border border-custom-border-200 bg-custom-background-100 px-2.5 py-1.5">
            <Search className="h-3.5 w-3.5 text-custom-text-400" />
--- a/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/sidebar.tsx
@ -28,7 +28,7 @@ export const WorkspaceSettingsSidebar = observer(() => {
  const workspaceMemberInfo = currentWorkspaceRole || EUserWorkspaceRoles.GUEST;

  return (
-    <div className="flex w-80 flex-col gap-6 px-5">
+    <div className="flex w-80 flex-col gap-6">
      <div className="flex flex-col gap-2">
        <span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
        <div className="flex w-full flex-col gap-1">
--- a/web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx
+++ b/web/app/[workspaceSlug]/(projects)/settings/webhooks/page.tsx
@ -51,7 +51,7 @@ const WebhooksListPage = observer(() => {
  return (
    <>
      <PageHead title={pageTitle} />
-      <div className="w-full overflow-y-auto md:pr-9 pr-4">
+      <div className="w-full overflow-y-auto">
        <CreateWebhookModal
          createWebhook={createWebhook}
          clearSecretKey={clearSecretKey}
--- a/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
+++ b/web/app/[workspaceSlug]/(projects)/workspace-views/header.tsx
@ -7,7 +7,7 @@ import { useParams } from "next/navigation";
 import { Layers } from "lucide-react";
 import { IIssueDisplayFilterOptions, IIssueDisplayProperties, IIssueFilterOptions } from "@plane/types";
 // ui
-import { Breadcrumbs, Button, CustomHeader } from "@plane/ui";
+import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "@/components/common";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection } from "@/components/issues";
@ -98,17 +98,17 @@ export const GlobalIssuesHeader = observer(() => {
  return (
    <>
      <CreateUpdateWorkspaceViewModal isOpen={createViewModal} onClose={() => setCreateViewModal(false)} />
-      <CustomHeader>
-        <CustomHeader.LeftItem>
+      <Header>
+        <Header.LeftItem>
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
              link={<BreadcrumbLink label={`Views`} icon={<Layers className="h-4 w-4 text-custom-text-300" />} />}
            />
          </Breadcrumbs>
-        </CustomHeader.LeftItem>
+        </Header.LeftItem>

-        <CustomHeader.RightItem>
+        <Header.RightItem>
          {!isLocked ? (
            <>
              <FiltersDropdown
@ -143,8 +143,8 @@ export const GlobalIssuesHeader = observer(() => {
          <Button variant="primary" size="sm" onClick={() => setCreateViewModal(true)}>
            Add view
          </Button>
-        </CustomHeader.RightItem>
-      </CustomHeader>
+        </Header.RightItem>
+      </Header>
    </>
  );
 });