(airflow) branch main updated: Fix grid pagination buttons hidden off the right edge (#73541)

[bbovenzi]

This is an automated email from the ASF dual-hosted git repository.

bbovenzi pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/airflow.git


The following commit(s) were added to refs/heads/main by this push:
     new d05971eacf9 Fix grid pagination buttons hidden off the right edge 
(#73541)
d05971eacf9 is described below

commit d05971eacf9da7479df8281b749d34dff3824fbb
Author: Yeonguk Choo <choo121...@gmail.com>
AuthorDate: Tue Sep 22 23:16:54 2026 +0900

    Fix grid pagination buttons hidden off the right edge (#73541)
---
 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 4b50ca777fc..06c0ae7803e 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
@@ -64,7 +64,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,
@@ -112,6 +115,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) ?? [],
@@ -231,7 +236,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}
@@ -261,7 +266,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 7f88373502a..b14ea828f6c 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 />