From a255036a6afcbd9cd0c2259319a77799ff47ac99 Mon Sep 17 00:00:00 2001
From: mhussaind <mohammedjoe53@gmail.com>
Date: Fri, 10 Jul 2026 02:52:13 -0400
Subject: [PATCH 1/3] UI: Fix Grid view scrollbar hiding latest Dag run

---
 airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
index a1cb9d36e991c..762c6dc3823dc 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
@@ -208,6 +208,7 @@ export const Grid = ({
             <DurationAxis top={`${GRID_HEADER_HEIGHT_PX / 2}px`} />
             <DurationAxis top="4px" />
             <Flex flexDirection="row-reverse">
+              {!showGantt && <Box aria-hidden flexShrink={0} minWidth="16px" width="16px" />}
               {runsWithVersionFlags?.map((dr) => (
                 <Bar
                   key={dr.run_id}
@@ -237,6 +238,7 @@ export const Grid = ({
           <TaskNames nodes={flatNodes} onRowClick={handleRowClick} virtualItems={virtualItems} />
         </Box>
         <Flex flexDirection="row-reverse" flexShrink={0}>
+          {!showGantt && <Box aria-hidden flexShrink={0} minWidth="16px" width="16px" />}
           {gridRuns?.map((dr: GridRunsResponse) => (
             <TaskInstancesColumn
               key={dr.run_id}

From 58c88b7fd67f74f659ceb6efe1e096dec9254585 Mon Sep 17 00:00:00 2001
From: mhussaind <mohammedjoe53@gmail.com>
Date: Fri, 10 Jul 2026 08:26:18 -0400
Subject: [PATCH 2/3] UI: Address review feedback for Grid scrollbar spacer

---
 .../src/airflow/ui/src/layouts/Details/Grid/Grid.tsx        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
index 762c6dc3823dc..591902ee4dbe7 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
@@ -62,6 +62,7 @@ type Props = {
 };
 
 const GRID_INNER_SCROLL_PADDING_START_PX = GRID_HEADER_PADDING_PX + GRID_HEADER_HEIGHT_PX;
+const ScrollbarSpacer = () => <Box aria-hidden flexShrink={0} minWidth="16px" width="16px" />;
 
 export const Grid = ({
   dagRunState,
@@ -208,7 +209,7 @@ export const Grid = ({
             <DurationAxis top={`${GRID_HEADER_HEIGHT_PX / 2}px`} />
             <DurationAxis top="4px" />
             <Flex flexDirection="row-reverse">
-              {!showGantt && <Box aria-hidden flexShrink={0} minWidth="16px" width="16px" />}
+              {!showGantt && <ScrollbarSpacer />}
               {runsWithVersionFlags?.map((dr) => (
                 <Bar
                   key={dr.run_id}
@@ -238,7 +239,7 @@ export const Grid = ({
           <TaskNames nodes={flatNodes} onRowClick={handleRowClick} virtualItems={virtualItems} />
         </Box>
         <Flex flexDirection="row-reverse" flexShrink={0}>
-          {!showGantt && <Box aria-hidden flexShrink={0} minWidth="16px" width="16px" />}
+          {!showGantt && <ScrollbarSpacer />}
           {gridRuns?.map((dr: GridRunsResponse) => (
             <TaskInstancesColumn
               key={dr.run_id}
@@ -275,7 +276,6 @@ export const Grid = ({
           marginRight={showGantt ? 0 : 1}
           minH={0}
           overflow="auto"
-          paddingRight={showGantt ? 0 : 6}
           position="relative"
           ref={scrollContainerRef}
         >

From 9fd6fc0264de5331736965c7a558158b0d6da0f7 Mon Sep 17 00:00:00 2001
From: mhussaind <mohammedjoe53@gmail.com>
Date: Sat, 25 Jul 2026 16:01:02 -0400
Subject: [PATCH 3/3] UI: Fix Grid header not hiding runs scrolled past

The sticky header's background only spanned the scrollport, so run
columns beyond it had no backing and task cells showed through when
the details panel was narrow and the grid scrolled right. The header's
top padding also left a band the sticky task name column did not cover,
exposing the tallest duration bar behind it.
---
 .../ui/src/layouts/Details/Grid/Grid.tsx      | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
index 591902ee4dbe7..5dd08e1bab5b9 100644
--- a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
+++ b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
@@ -190,9 +190,25 @@ export const Grid = ({
 
   const gridHeaderAndBody = (
     <>
-      {/* Grid header, both bgs are needed to hide elements during horizontal and vertical scroll */}
-      <Flex bg="bg" display="flex" position="sticky" pt={`${GRID_HEADER_PADDING_PX}px`} top={0} zIndex={2}>
-        <Box bg="bg" left={0} position="sticky" zIndex={1} {...taskNameColumnStyles}>
+      {/* Grid header. minWidth stretches the header past the scrollport so its bg covers every run
+        column during horizontal scroll; the padding sits on the children so the sticky task name
+        column's bg spans the full header height and hides bars scrolled behind it. */}
+      <Flex
+        bg="bg"
+        display="flex"
+        minWidth={usesSharedScroll ? undefined : "max-content"}
+        position="sticky"
+        top={0}
+        zIndex={2}
+      >
+        <Box
+          bg="bg"
+          left={0}
+          position="sticky"
+          pt={`${GRID_HEADER_PADDING_PX}px`}
+          zIndex={1}
+          {...taskNameColumnStyles}
+        >
           <Flex flexDirection="column-reverse" height={`${GRID_HEADER_HEIGHT_PX}px`} position="relative">
             {Boolean(gridRuns?.length) && (
               <>
@@ -203,7 +219,7 @@ export const Grid = ({
           </Flex>
         </Box>
         {/* Duration bars */}
-        <Flex flexDirection="row-reverse" flexShrink={0}>
+        <Flex flexDirection="row-reverse" flexShrink={0} pt={`${GRID_HEADER_PADDING_PX}px`}>
           <Flex flexShrink={0} position="relative">
             <DurationAxis top={`${GRID_HEADER_HEIGHT_PX}px`} />
             <DurationAxis top={`${GRID_HEADER_HEIGHT_PX / 2}px`} />