From 3c6e2b444753e8fcf32c00bb425ba65f60bb994b Mon Sep 17 00:00:00 2001
From: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
Date: Thu, 24 Jul 2025 14:06:46 +0530
Subject: [PATCH] [WEB-4552] fix: stickies layout + minified layout filter
 (#7466)

---
 .../(detail)/[projectId]/cycles/(detail)/header.tsx      | 8 +++++++-
 .../(detail)/[projectId]/modules/(detail)/header.tsx     | 8 +++++++-
 .../filters/header/mobile-layout-selection.tsx           | 2 +-
 .../core/components/stickies/layout/stickies-list.tsx    | 9 ++++++---
 packages/constants/src/issue/layout.ts                   | 1 +
 5 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
index bf3948859..8cadaea82 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/cycles/(detail)/header.tsx
@@ -228,7 +228,13 @@ export const CycleIssuesHeader: React.FC = observer(() => {
             </div>
             <div className="flex @4xl:hidden">
               <MobileLayoutSelection
-                layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
+                layouts={[
+                  EIssueLayoutTypes.LIST,
+                  EIssueLayoutTypes.KANBAN,
+                  EIssueLayoutTypes.CALENDAR,
+                  EIssueLayoutTypes.SPREADSHEET,
+                  EIssueLayoutTypes.GANTT,
+                ]}
                 onChange={(layout) => handleLayoutChange(layout)}
                 activeLayout={activeLayout}
               />
diff --git a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
index cace88821..67dc8801c 100644
--- a/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/modules/(detail)/header.tsx
@@ -219,7 +219,13 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
             </div>
             <div className="flex @4xl:hidden">
               <MobileLayoutSelection
-                layouts={[EIssueLayoutTypes.LIST, EIssueLayoutTypes.KANBAN, EIssueLayoutTypes.CALENDAR]}
+                layouts={[
+                  EIssueLayoutTypes.LIST,
+                  EIssueLayoutTypes.KANBAN,
+                  EIssueLayoutTypes.CALENDAR,
+                  EIssueLayoutTypes.SPREADSHEET,
+                  EIssueLayoutTypes.GANTT,
+                ]}
                 onChange={(layout) => handleLayoutChange(layout)}
                 activeLayout={activeLayout}
               />
diff --git a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
index 3d503b35b..93d02aaf4 100644
--- a/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
+++ b/apps/web/core/components/issues/issue-layouts/filters/header/mobile-layout-selection.tsx
@@ -46,7 +46,7 @@ export const MobileLayoutSelection = ({
           className="flex items-center gap-2"
         >
           <IssueLayoutIcon layout={layout.key} className="h-3 w-3" />
-          <div className="text-custom-text-300">{t(layout.i18n_title)}</div>
+          <div className="text-custom-text-300">{t(layout.i18n_label)}</div>
         </CustomMenu.MenuItem>
       ))}
     </CustomMenu>
diff --git a/apps/web/core/components/stickies/layout/stickies-list.tsx b/apps/web/core/components/stickies/layout/stickies-list.tsx
index 6c6679830..a04424ce3 100644
--- a/apps/web/core/components/stickies/layout/stickies-list.tsx
+++ b/apps/web/core/components/stickies/layout/stickies-list.tsx
@@ -182,10 +182,13 @@ export const StickiesLayout = (props: TStickiesLayout) => {
   }, []);
 
   const getColumnCount = (width: number | null): number => {
-    if (width === null) return 3;
+    if (width === null) return 4;
 
-    if (width < 640) return 2;
-    return 3;
+    if (width < 640) return 2; // sm
+    if (width < 850) return 3; // md
+    if (width < 1024) return 4; // lg
+    if (width < 1280) return 5; // xl
+    return 6; // 2xl and above
   };
   const columnCount = getColumnCount(containerWidth);
 
diff --git a/packages/constants/src/issue/layout.ts b/packages/constants/src/issue/layout.ts
index 23ff1e394..9f983aee4 100644
--- a/packages/constants/src/issue/layout.ts
+++ b/packages/constants/src/issue/layout.ts
@@ -62,4 +62,5 @@ export const ISSUE_LAYOUT_MAP: TIssueLayoutMap = {
 export const ISSUE_LAYOUTS: {
   key: EIssueLayoutTypes;
   i18n_title: string;
+  i18n_label: string;
 }[] = Object.values(ISSUE_LAYOUT_MAP);