From 5f6c9a416640140d727da487d9ceac6eb8d058a5 Mon Sep 17 00:00:00 2001
From: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
Date: Fri, 23 Feb 2024 19:06:47 +0530
Subject: [PATCH] fix calendar layout distortion because of scrollbar (#3770)

---
 .../issue-layouts/calendar/calendar.tsx       | 74 ++++++++++---------
 .../issue-layouts/calendar/day-tile.tsx       |  2 +-
 .../issue-layouts/calendar/week-header.tsx    |  2 +-
 3 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx
index 4dcaab335..badb849fb 100644
--- a/web/components/issues/issue-layouts/calendar/calendar.tsx
+++ b/web/components/issues/issue-layouts/calendar/calendar.tsx
@@ -73,42 +73,44 @@ export const CalendarChart: React.FC<Props> = observer((props) => {
     <>
       <div className="flex h-full w-full flex-col overflow-hidden">
         <CalendarHeader issuesFilterStore={issuesFilterStore} viewId={viewId} />
-        <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
-        <div className="h-full w-full overflow-y-auto vertical-scrollbar scrollbar-lg">
-          {layout === "month" && (
-            <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
-              {allWeeksOfActiveMonth &&
-                Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
-                  <CalendarWeekDays
-                    issuesFilterStore={issuesFilterStore}
-                    key={weekIndex}
-                    week={week}
-                    issues={issues}
-                    groupedIssueIds={groupedIssueIds}
-                    enableQuickIssueCreate
-                    disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
-                    quickActions={quickActions}
-                    quickAddCallback={quickAddCallback}
-                    viewId={viewId}
-                    readOnly={readOnly}
-                  />
-                ))}
-            </div>
-          )}
-          {layout === "week" && (
-            <CalendarWeekDays
-              issuesFilterStore={issuesFilterStore}
-              week={issueCalendarView.allDaysOfActiveWeek}
-              issues={issues}
-              groupedIssueIds={groupedIssueIds}
-              enableQuickIssueCreate
-              disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
-              quickActions={quickActions}
-              quickAddCallback={quickAddCallback}
-              viewId={viewId}
-              readOnly={readOnly}
-            />
-          )}
+        <div className="flex h-full w-full vertical-scrollbar scrollbar-lg flex-col">
+          <CalendarWeekHeader isLoading={!issues} showWeekends={showWeekends} />
+          <div className="h-full w-full">
+            {layout === "month" && (
+              <div className="grid h-full w-full grid-cols-1 divide-y-[0.5px] divide-custom-border-200">
+                {allWeeksOfActiveMonth &&
+                  Object.values(allWeeksOfActiveMonth).map((week: ICalendarWeek, weekIndex) => (
+                    <CalendarWeekDays
+                      issuesFilterStore={issuesFilterStore}
+                      key={weekIndex}
+                      week={week}
+                      issues={issues}
+                      groupedIssueIds={groupedIssueIds}
+                      enableQuickIssueCreate
+                      disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+                      quickActions={quickActions}
+                      quickAddCallback={quickAddCallback}
+                      viewId={viewId}
+                      readOnly={readOnly}
+                    />
+                  ))}
+              </div>
+            )}
+            {layout === "week" && (
+              <CalendarWeekDays
+                issuesFilterStore={issuesFilterStore}
+                week={issueCalendarView.allDaysOfActiveWeek}
+                issues={issues}
+                groupedIssueIds={groupedIssueIds}
+                enableQuickIssueCreate
+                disableIssueCreation={!enableIssueCreation || !isEditingAllowed}
+                quickActions={quickActions}
+                quickAddCallback={quickAddCallback}
+                viewId={viewId}
+                readOnly={readOnly}
+              />
+            )}
+          </div>
         </div>
       </div>
     </>
diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx
index 85ab152a7..f92365a58 100644
--- a/web/components/issues/issue-layouts/calendar/day-tile.tsx
+++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx
@@ -91,7 +91,7 @@ export const CalendarDayTile: React.FC<Props> = observer((props) => {
                   snapshot.isDraggingOver || date.date.getDay() === 0 || date.date.getDay() === 6
                     ? "bg-custom-background-90"
                     : "bg-custom-background-100"
-                } ${calendarLayout === "month" ? "min-h-[9rem]" : ""}`}
+                } ${calendarLayout === "month" ? "min-h-[5rem]" : ""}`}
                 {...provided.droppableProps}
                 ref={provided.innerRef}
               >
diff --git a/web/components/issues/issue-layouts/calendar/week-header.tsx b/web/components/issues/issue-layouts/calendar/week-header.tsx
index f5ec41e96..a4b714c94 100644
--- a/web/components/issues/issue-layouts/calendar/week-header.tsx
+++ b/web/components/issues/issue-layouts/calendar/week-header.tsx
@@ -13,7 +13,7 @@ export const CalendarWeekHeader: React.FC<Props> = observer((props) => {
 
   return (
     <div
-      className={`relative grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
+      className={`relative sticky top-0 z-[1] grid divide-x-[0.5px] divide-custom-border-200 text-sm font-medium ${
         showWeekends ? "grid-cols-7" : "grid-cols-5"
       }`}
     >