[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

web/core/components/ui/loader/layouts/calendar-layout-loader.tsx

@@ -17,7 +17,7 @@ const CalendarDay = () => {
 };
 
 export const CalendarLayoutLoader = () => (
-  <div className="h-full w-full overflow-y-auto bg-custom-background-100 pt-4 animate-pulse">
+  <div className="h-full w-full overflow-y-auto bg-custom-background-100 animate-pulse">
     <span className="relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium grid-cols-5">
       {[...Array(5)].map((_, index) => (
         <span key={index} className="h-11 w-full bg-custom-background-80" />

web/core/components/ui/loader/layouts/gantt-layout-loader.tsx

@@ -1,3 +1,4 @@
+import { Row } from "@plane/ui";
 import { getRandomLength } from "../utils";
 
 export const GanttLayoutLoader = () => (
@@ -7,24 +8,24 @@ export const GanttLayoutLoader = () => (
     </div>
     <div className="flex h-full">
       <div className="h-full w-[25.5rem] border-r border-custom-border-200">
-        <div className="flex items-end h-[3.75rem] py-2 px-4 border-b border-custom-border-200">
-          <div className="flex items-center pl-6 justify-between w-full">
+        <Row className="flex items-end h-[3.75rem] 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" />
           </div>
-        </div>
-        <div className="flex flex-col gap-3 h-11 p-4 w-full">
+        </Row>
+        <Row className="flex flex-col gap-3 h-11 py-4 w-full">
           {[...Array(6)].map((_, index) => (
-            <div key={index} className="flex items-center gap-3  h-11 pl-6 w-full">
+            <div key={index} className="flex items-center gap-3  h-11 w-full">
               <span className="h-6 w-6 bg-custom-background-80 rounded" />
               <span className={`h-6 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded`} />
             </div>
           ))}
-        </div>
+        </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 items-center justify-center">
+          <div className="flex items-center justify-start">
             <span className="h-5 w-20 bg-custom-background-80 rounded" />
           </div>
           <div className="flex items-center gap-3 justify-between w-full">

web/core/components/ui/loader/layouts/kanban-layout-loader.tsx

@@ -1,4 +1,5 @@
 import { forwardRef } from "react";
+import { ContentWrapper } from "@plane/ui";
 
 export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement>((props, ref) => (
   <span ref={ref} className="block h-28 m-1.5 animate-pulse bg-custom-background-80 rounded" />
@@ -7,11 +8,11 @@ export const KanbanIssueBlockLoader = forwardRef<HTMLSpanElement>((props, ref) =
 KanbanIssueBlockLoader.displayName = "KanbanIssueBlockLoader";
 
 export const KanbanLayoutLoader = ({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { cardsInEachColumn?: number[] }) => (
-  <div className="flex gap-5 px-3.5 py-1.5 overflow-x-auto">
+  <ContentWrapper className="flex-row gap-5 py-1.5 overflow-x-auto">
     {cardsInEachColumn.map((cardsInColumn, columnIndex) => (
       <div key={columnIndex} className="flex flex-col gap-3">
         <div className="flex items-center justify-between h-9 w-80">
-          <div className="flex item-center gap-3 px-1.5">
+          <div className="flex item-center gap-3">
             <span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
             <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
           </div>
@@ -21,5 +22,5 @@ export const KanbanLayoutLoader = ({ cardsInEachColumn = [2, 3, 2, 4, 3] }: { ca
         ))}
       </div>
     ))}
-  </div>
+  </ContentWrapper>
 );

web/core/components/ui/loader/layouts/list-layout-loader.tsx

@@ -1,8 +1,9 @@
 import { Fragment, forwardRef } from "react";
+import { Row } from "@plane/ui";
 import { getRandomInt, getRandomLength } from "../utils";
 
 export const ListLoaderItemRow = forwardRef<HTMLDivElement>((props, ref) => (
-  <div ref={ref} className="flex items-center justify-between h-11 p-3 border-b border-custom-border-200">
+  <Row ref={ref} className="flex items-center justify-between h-11 py-3 border-b border-custom-border-200">
     <div className="flex items-center gap-3">
       <span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
       <span className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded animate-pulse`} />
@@ -18,19 +19,19 @@ export const ListLoaderItemRow = forwardRef<HTMLDivElement>((props, ref) => (
         </Fragment>
       ))}
     </div>
-  </div>
+  </Row>
 ));
 
 ListLoaderItemRow.displayName = "ListLoaderItemRow";
 
 const ListSection = ({ itemCount }: { itemCount: number }) => (
   <div className="flex flex-shrink-0 flex-col">
-    <div className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 px-3 py-1">
+    <Row className="sticky top-0 z-[2] w-full flex-shrink-0 border-b border-custom-border-200 bg-custom-background-90 py-1">
       <div className="flex items-center gap-2 py-1.5 w-full">
         <span className="h-6 w-6 bg-custom-background-80 rounded animate-pulse" />
         <span className="h-6 w-24 bg-custom-background-80 rounded animate-pulse" />
       </div>
-    </div>
+    </Row>
     <div className="relative h-full w-full">
       {[...Array(itemCount)].map((_, index) => (
         <ListLoaderItemRow key={index} />

web/core/components/ui/loader/layouts/spreadsheet-layout-loader.tsx

@@ -1,14 +1,15 @@
+import { Row } from "@plane/ui";
 import { getRandomLength } from "../utils";
 
 export const SpreadsheetIssueRowLoader = (props: { columnCount: number }) => (
   <tr className="border-b border-custom-border-200 bg-custom-background-100">
     <td className="h-11 min-w-[28rem] z-[10] sticky left-0 flex items-center border-r-[0.5px] border-custom-border-200 bg-custom-background-100">
-      <div className="flex items-center gap-3 px-3">
+      <Row className="flex items-center gap-3">
         <span className="h-5 w-10 bg-custom-background-80 rounded animate-pulse" />
         <span
           className={`h-5 w-${getRandomLength(["32", "52", "72"])} bg-custom-background-80 rounded animate-pulse`}
         />
-      </div>
+      </Row>
     </td>
     {[...Array(props.columnCount)].map((_, colIndex) => (
       <td key={colIndex} className="h-11 w-full min-w-[8rem] border-r border-custom-border-200 ">