From 178d2e2593b6285155493f2ddc2d1b4548c738b2 Mon Sep 17 00:00:00 2001
From: Brent Bovenzi <brent.bovenzi@gmail.com>
Date: Thu, 27 Jun 2024 11:44:47 -0400
Subject: [PATCH] Fix calendar view scroll

---
 airflow/www/static/js/dag/details/dag/Calendar.tsx | 9 +++++----
 airflow/www/static/js/dag/details/index.tsx        | 2 +-
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/airflow/www/static/js/dag/details/dag/Calendar.tsx b/airflow/www/static/js/dag/details/dag/Calendar.tsx
index 6826ab5d674bf..f3c4b44a29382 100644
--- a/airflow/www/static/js/dag/details/dag/Calendar.tsx
+++ b/airflow/www/static/js/dag/details/dag/Calendar.tsx
@@ -77,8 +77,8 @@ const Calendar = () => {
 
   // We need to split the data into multiple years of calendars
   if (startYear !== endYear) {
-    for (let y = startYear; y <= endYear; y += 1) {
-      const index = y - startYear;
+    for (let y = endYear; y >= startYear; y -= 1) {
+      const index = endYear - y;
       const yearStartDate = y === startYear ? startDate : `${y}-01-01`;
       const yearEndDate = `${y}-12-31`;
       calendarOption.push({
@@ -182,6 +182,7 @@ const Calendar = () => {
           color: "gray",
           opacity: 0.6,
         },
+        show: false,
       },
     ],
     calendar: calendarOption,
@@ -195,10 +196,10 @@ const Calendar = () => {
   };
 
   return (
-    <Box height="100%">
+    <Box height={`${calendarOption.length * 165}px`} width="900px">
       <Flex>
         <InfoTooltip
-          label="        Only showing the next year of planned DAG runs or the next 2000 runs,
+          label="Only showing the next year of planned DAG runs or the next 2000 runs,
           whichever comes first."
           size={16}
         />
diff --git a/airflow/www/static/js/dag/details/index.tsx b/airflow/www/static/js/dag/details/index.tsx
index 33d2b68ef4005..c76744df07e32 100644
--- a/airflow/www/static/js/dag/details/index.tsx
+++ b/airflow/www/static/js/dag/details/index.tsx
@@ -449,7 +449,7 @@ const Details = ({
             </TabPanel>
           )}
           {isDag && (
-            <TabPanel height="100%" width="100%">
+            <TabPanel height="100%" width="100%" overflow="auto">
               <Calendar />
             </TabPanel>
           )}