This is an automated email from the ASF dual-hosted git repository.
pierrejeambrun 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 ac7f4e5cee8 [v3-3-test] Fix grid pagination buttons hidden off the
right edge (#73541) (#73557)
ac7f4e5cee8 is described below
commit ac7f4e5cee81c9bc992380099ecd255b38f9cbd7
Author: github-actions[bot]
<41898282+github-actions[bot]@users.noreply.github.com>
AuthorDate: Wed Sep 23 17:03:36 2026 +0200
[v3-3-test] Fix grid pagination buttons hidden off the right edge (#73541)
(#73557)
(cherry picked from commit d05971eacf9da7479df8281b749d34dff3824fbb)
Co-authored-by: Yeonguk Choo <[email protected]>
---
airflow-core/src/airflow/ui/src/layouts/Details/Grid/Grid.tsx | 11 ++++++++---
.../ui/src/layouts/Details/Grid/GridPaginationButtons.tsx | 2 +-
2 files changed, 9 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 5dd08e1bab5..7faf057f9bb 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,7 +62,10 @@ 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" />;
+// Reserves right-edge space for the scrollbar, and widens to fit the
newer/reset pager buttons when shown.
+const ScrollbarSpacer = ({ width = "16px" }: { readonly width?: string }) => (
+ <Box aria-hidden flexShrink={0} minWidth={width} width={width} />
+);
export const Grid = ({
dagRunState,
@@ -108,6 +111,8 @@ export const Grid = ({
const { handleNewerRuns, handleOlderRuns, hasNewerRuns, hasOlderRuns,
latestNotVisible } =
useGridPagination({ gridRuns: dataGridRuns, limit, offset, setOffset });
+ const scrollbarSpacerWidth = hasNewerRuns || latestNotVisible ? "32px" :
"16px";
+
const { summariesByRunId } = useGridTiSummariesStream({
dagId,
runIds: gridRuns?.map((dr: GridRunsResponse) => dr.run_id) ?? [],
@@ -225,7 +230,7 @@ export const Grid = ({
<DurationAxis top={`${GRID_HEADER_HEIGHT_PX / 2}px`} />
<DurationAxis top="4px" />
<Flex flexDirection="row-reverse">
- {!showGantt && <ScrollbarSpacer />}
+ {!showGantt && <ScrollbarSpacer width={scrollbarSpacerWidth} />}
{runsWithVersionFlags?.map((dr) => (
<Bar
key={dr.run_id}
@@ -255,7 +260,7 @@ export const Grid = ({
<TaskNames nodes={flatNodes} onRowClick={handleRowClick}
virtualItems={virtualItems} />
</Box>
<Flex flexDirection="row-reverse" flexShrink={0}>
- {!showGantt && <ScrollbarSpacer />}
+ {!showGantt && <ScrollbarSpacer width={scrollbarSpacerWidth} />}
{gridRuns?.map((dr: GridRunsResponse) => (
<TaskInstancesColumn
key={dr.run_id}
diff --git
a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridPaginationButtons.tsx
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridPaginationButtons.tsx
index db923805184..104e38b4009 100644
---
a/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridPaginationButtons.tsx
+++
b/airflow-core/src/airflow/ui/src/layouts/Details/Grid/GridPaginationButtons.tsx
@@ -58,7 +58,7 @@ export const GridPaginationButtons = ({
return (
<>
{latestNotVisible || hasNewerRuns ? (
- <Flex bottom={0} flexDirection="column" gap={1} position="absolute"
right={-6} zIndex={1}>
+ <Flex bottom={0} flexDirection="column" gap={1} position="absolute"
right={1} zIndex={1}>
{latestNotVisible ? (
<IconButton label={resetLabel} onClick={onJumpToLatest}
{...buttonProps}>
<FiChevronsRight />
