Skip to content

Fix Grid view scrollbar hiding latest Dags run #69693

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MhussainD4772 wants to merge 3 commits into
base: main
Choose a base branch
from
+23 −5
Open

Fix Grid view scrollbar hiding latest Dags run #69693

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a255036
UI: Fix Grid view scrollbar hiding latest Dag run
MhussainD4772 Jul 10, 2026
58c88b7
UI: Address review feedback for Grid scrollbar spacer
MhussainD4772 Jul 10, 2026
9fd6fc0
UI: Fix Grid header not hiding runs scrolled past
MhussainD4772 Jul 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 23 additions & 5 deletions airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -189,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) && (
<>
Expand All @@ -202,12 +219,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}
Expand Down Expand Up @@ -237,6 +255,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}
Comment thread
pierrejeambrun marked this conversation as resolved.
Expand Down Expand Up @@ -273,7 +292,6 @@ export const Grid = ({
marginRight={showGantt ? 0 : 1}
minH={0}
overflow="auto"
paddingRight={showGantt ? 0 : 6}
position="relative"
ref={scrollContainerRef}
>
Expand Down