[WEB-2273] Fix: page alignments (#5541)

* 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

* fix: header-alignments

* fix: tabs

* fix: settings page

* fix: subgroup page

* fix: mobile headers

* fix: settings mobile header made observable

* fix: lint error + edge case handling

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx

@@ -291,6 +291,7 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                 </Button>
                 {!isCompletedCycle && (
                   <Button
+                    className="h-full self-start"
                     onClick={() => {
                       setTrackElement("Cycle issues page");
                       toggleCreateIssueModal(true, EIssuesStoreType.CYCLE);

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(list)/header.tsx

@@ -55,25 +55,23 @@ export const CyclesListHeader: FC = observer(() => {
           />
         </Breadcrumbs>
       </Header.LeftItem>
-      <Header.RightItem>
-        {canUserCreateCycle && currentProjectDetails ? (
-          <div className="flex items-center gap-3">
-            <CyclesViewHeader projectId={currentProjectDetails.id} />
-            <Button
-              variant="primary"
-              size="sm"
-              onClick={() => {
-                setTrackElement("Cycles page");
-                toggleCreateCycleModal(true);
-              }}
-            >
-              <div className="hidden sm:block">Add</div> Cycle
-            </Button>
-          </div>
-        ) : (
-          <></>
-        )}
-      </Header.RightItem>
+      {canUserCreateCycle && currentProjectDetails ? (
+        <Header.RightItem>
+          <CyclesViewHeader projectId={currentProjectDetails.id} />
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => {
+              setTrackElement("Cycles page");
+              toggleCreateCycleModal(true);
+            }}
+          >
+            <div className="hidden sm:block">Add</div> Cycle
+          </Button>
+        </Header.RightItem>
+      ) : (
+        <></>
+      )}
     </Header>
   );
 });

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, Row } from "@plane/ui";
+import { CustomMenu } from "@plane/ui";
 // components
 import { ProjectAnalyticsModal } from "@/components/analytics";
 import { DisplayFiltersSelection, FilterSelection, FiltersDropdown } from "@/components/issues/issue-layouts";
@@ -107,10 +107,10 @@ export const ProjectIssuesMobileHeader = observer(() => {
           className="flex flex-grow justify-center text-sm text-custom-text-200"
           placement="bottom-start"
           customButton={
-            <Row className="flex flex-start text-sm text-custom-text-200">
+            <div 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>
+              <ChevronDown className="ml-2  h-4 w-4 text-custom-text-200 my-auto" strokeWidth={2} />
+            </div>
           }
           customButtonClassName="flex flex-grow justify-center text-custom-text-200 text-sm"
           closeOnSelect

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(list)/mobile-header.tsx

@@ -17,7 +17,7 @@ export const ModulesListMobileHeader = observer(() => {
         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={
-          <Row className="flex flex-grow justify-start text-custom-text-200 text-sm gap-2">
+          <Row className="flex flex-grow justify-center 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>
         }

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(list)/header.tsx

@@ -57,27 +57,25 @@ export const PagesListHeader = observer(() => {
           </Breadcrumbs>
         </div>
       </Header.LeftItem>
-      <Header.RightItem>
-        {canUserCreatePage ? (
-          <div className="flex items-center gap-2">
-            <Button
-              variant="primary"
-              size="sm"
-              onClick={() => {
-                setTrackElement("Project pages page");
-                toggleCreatePageModal({
-                  isOpen: true,
-                  pageAccess: pageType === "private" ? EPageAccess.PRIVATE : EPageAccess.PUBLIC,
-                });
-              }}
-            >
-              Add page
-            </Button>
-          </div>
-        ) : (
-          <></>
-        )}
-      </Header.RightItem>
+      {canUserCreatePage ? (
+        <Header.RightItem>
+          <Button
+            variant="primary"
+            size="sm"
+            onClick={() => {
+              setTrackElement("Project pages page");
+              toggleCreatePageModal({
+                isOpen: true,
+                pageAccess: pageType === "private" ? EPageAccess.PRIVATE : EPageAccess.PUBLIC,
+              });
+            }}
+          >
+            Add page
+          </Button>
+        </Header.RightItem>
+      ) : (
+        <></>
+      )}
     </Header>
   );
 });

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/automations/page.tsx

@@ -45,9 +45,9 @@ const AutomationSettingsPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <section className={`w-full overflow-y-auto py-8 pr-9 ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
-        <div className="flex items-center border-b border-custom-border-100 py-3.5">
-          <h3 className="text-xl font-medium">Automations</h3>
+      <section className={`w-full overflow-y-auto ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
+        <div className="flex flex-col items-start border-b border-custom-border-100 pb-3.5">
+          <h3 className="text-xl font-medium leading-normal">Automations</h3>
         </div>
         <AutoArchiveAutomation handleChange={handleChange} />
         <AutoCloseAutomation handleChange={handleChange} />

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/estimates/page.tsx

@@ -30,7 +30,7 @@ const EstimatesSettingsPage = observer(() => {
     <>
       <PageHead title={pageTitle} />
       <div
-        className={`w-full overflow-y-auto py-8 pr-9 ${canPerformProjectAdminActions ? "" : "pointer-events-none opacity-60"}`}
+        className={`w-full overflow-y-auto ${canPerformProjectAdminActions ? "" : "pointer-events-none opacity-60"}`}
       >
         <EstimateRoot
           workspaceSlug={workspaceSlug?.toString()}

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/features/page.tsx

@@ -29,7 +29,7 @@ const FeaturesSettingsPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <section className={`w-full overflow-y-auto py-8 pr-9 ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
+      <section className={`w-full overflow-y-auto ${canPerformProjectAdminActions ? "" : "opacity-60"}`}>
         <ProjectFeaturesList
           workspaceSlug={workspaceSlug.toString()}
           projectId={projectId.toString()}

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-2 pr-9">
+      <div ref={scrollableContainerRef} className="h-full w-full gap-10 overflow-y-auto">
         <ProjectSettingsLabelList />
       </div>
     </>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/layout.tsx

@@ -2,7 +2,8 @@
 
 import { FC, ReactNode } from "react";
 // components
-import { AppHeader, ContentWrapper } from "@/components/core";
+import { ContentWrapper } from "@plane/ui";
+import { AppHeader } from "@/components/core";
 // local components
 import { ProjectSettingHeader } from "./header";
 import { ProjectSettingsSidebar } from "./sidebar";
@@ -16,14 +17,12 @@ const ProjectSettingLayout: FC<IProjectSettingLayout> = (props) => {
   return (
     <>
       <AppHeader header={<ProjectSettingHeader />} />
-      <ContentWrapper>
-        <div className="inset-y-0 z-20 flex flex-grow-0 h-full w-full">
-          <div className="w-80 flex-shrink-0 overflow-y-hidden pt-8 sm:hidden hidden md:block lg:block">
-            <ProjectSettingsSidebar />
-          </div>
-          <div className="w-full pl-10 sm:pl-10 md:pl-3 lg:pl-3 overflow-y-scroll vertical-scrollbar scrollbar-md">
-            {children}
-          </div>
+      <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">
+          <ProjectSettingsSidebar />
+        </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>
     </>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/members/page.tsx

@@ -25,7 +25,7 @@ const MembersSettingsPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <section className={`w-full overflow-y-auto py-8 pr-9`}>
+      <section className={`w-full overflow-y-auto`}>
         <ProjectSettingsMemberDefaults />
         <ProjectMemberList />
       </section>

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/page.tsx

@@ -57,7 +57,7 @@ const GeneralSettingsPage = observer(() => {
         </>
       )}
 
-      <div className={`w-full overflow-y-auto py-8 pr-9 ${isAdmin ? "" : "opacity-60"}`}>
+      <div className={`w-full overflow-y-auto ${isAdmin ? "" : "opacity-60"}`}>
         {currentProjectDetails && workspaceSlug && projectId && !isLoading ? (
           <ProjectDetailsForm
             project={currentProjectDetails}

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/sidebar.tsx

@@ -27,7 +27,7 @@ export const ProjectSettingsSidebar = observer(() => {
 
   if (!currentProjectRole) {
     return (
-      <div className="flex w-80 flex-col gap-6 px-5">
+      <div className="flex w-[280px] flex-col gap-6">
         <div className="flex flex-col gap-2">
           <span className="text-xs font-semibold text-custom-sidebar-text-400">SETTINGS</span>
           <Loader className="flex w-full flex-col gap-2">
@@ -41,7 +41,7 @@ export const ProjectSettingsSidebar = observer(() => {
   }
 
   return (
-    <div className="flex w-80 flex-col gap-6 px-5">
+    <div className="flex w-[280px] 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">

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/settings/states/page.tsx

@@ -27,14 +27,12 @@ const StatesSettingsPage = observer(() => {
   return (
     <>
       <PageHead title={pageTitle} />
-      <div className="py-8 pr-9">
-        <div className="flex items-center border-b border-custom-border-100 py-3.5">
-          <h3 className="text-xl font-medium">States</h3>
-        </div>
-        {workspaceSlug && projectId && (
-          <ProjectStateRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
-        )}
+      <div className="flex items-center border-b border-custom-border-100">
+        <h3 className="text-xl font-medium">States</h3>
       </div>
+      {workspaceSlug && projectId && (
+        <ProjectStateRoot workspaceSlug={workspaceSlug.toString()} projectId={projectId.toString()} />
+      )}
     </>
   );
 });

web/app/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/views/(list)/mobile-header.tsx

@@ -21,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">
-        <Row className="flex items-center justify-start border-l border-custom-border-200 text-sm text-custom-text-200">
+        <Row className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
           <ViewOrderByDropdown
             sortBy={filters.sortBy}
             sortKey={filters.sortKey}
@@ -32,7 +32,7 @@ export const ViewMobileHeader = observer(() => {
             isMobile
           />
         </Row>
-        <div className="flex flex-grow items-center justify-start border-l border-custom-border-200 text-sm text-custom-text-200">
+        <div className="flex flex-grow items-center justify-center border-l border-custom-border-200 text-sm text-custom-text-200">
           <FiltersDropdown
             icon={<ListFilter className="h-3 w-3" />}
             title="Filters"
@@ -41,7 +41,7 @@ export const ViewMobileHeader = observer(() => {
             menuButton={
               <Row className="flex items-center text-sm text-custom-text-200">
                 Filters
-                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={1} />
+                <ChevronDown className="ml-2 h-4 w-4 text-custom-text-200" strokeWidth={2} />
               </Row>
             }
           >