This is an automated email from the ASF dual-hosted git repository.
potiuk pushed a commit to branch v3-3-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-3-test by this push:
new 82fe885f4c2 [v3-3-test] Fix Grid view scrollbar hiding latest Dags run
(#69693) (#70555)
82fe885f4c2 is described below
commit 82fe885f4c2ab66552a1dce0d2a64f13967fdf70
Author: github-actions[bot]
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Tue Jul 28 19:09:59 2026 +0200
[v3-3-test] Fix Grid view scrollbar hiding latest Dags run (#69693) (#70555)
* UI: Fix Grid view scrollbar hiding latest Dag run
* UI: Address review feedback for Grid scrollbar spacer
* 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.
(cherry picked from commit df27d46cbbea2da451f41dcd6a7714d29d164420)
Co-authored-by: MO Hussain <[email protected]>
---
.../airflow/ui/src/layouts/Details/Grid/Grid.tsx | 28 ++++++++++++++++++----
1 file changed, 23 insertions(+), 5 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 ff122b47b2d..d3402432191 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
@@ -63,6 +63,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,
@@ -193,9 +194,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) && (
<>
@@ -206,12 +223,13 @@ 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`} />
<DurationAxis top="4px" />
<Flex flexDirection="row-reverse">
+ {!showGantt && <ScrollbarSpacer />}
{runsWithVersionFlags?.map((dr) => (
<Bar
key={dr.run_id}
@@ -241,6 +259,7 @@ export const Grid = ({
<TaskNames nodes={flatNodes} onRowClick={handleRowClick}
virtualItems={virtualItems} />
</Box>
<Flex flexDirection="row-reverse" flexShrink={0}>
+ {!showGantt && <ScrollbarSpacer />}
{gridRuns?.map((dr: GridRunsResponse) => (
<TaskInstancesColumn
key={dr.run_id}
@@ -277,7 +296,6 @@ export const Grid = ({
marginRight={showGantt ? 0 : 1}
minH={0}
overflow="auto"
- paddingRight={showGantt ? 0 : 6}
position="relative"
ref={scrollContainerRef}
>
