Fix Grid view scrollbar hiding latest Dags run

[MhussainD4772]

On macOS, the vertical scrollbar in the Dags Grid view could overlay the task cells of the latest (rightmost) Dags run, making them hard to see and click. macOS uses overlay scrollbars, which do not respect scrollbar-gutter, so this code change adds a small non-interactive spacer after the newest run column in Grid-only view to keep the scrollbar off those cells.

closes: #69447

Testing

• macOS Safari, Firefox, and Chrome - Grid view: scrolled to the latest run with the vertical scrollbar visible; the rightmost column stays fully visible.
• Bug reproduced:

-Bug fix scrrenshots and videos are below

BUG-FIXED-VIDEO-.firefox.mov

BUG-FIXED-VIDEO.safari.mov

Before/after screenshots attached below.

---

Was generative AI tooling used to co-author this PR?

• Yes — Cursor IDE

Generated-by: Cursor following the guidelines

---

[boring-cyborg]

Congratulations on your first Pull Request and welcome to the Apache Airflow community! If you have any issues or are unsure about any anything please check our Contributors' Guide
Here are some useful points:

• Pay attention to the quality of your code (ruff, mypy and type annotations). Our prek-hooks will help you with that.
• In case of a new feature add useful documentation (in docstrings or in docs/ directory). Adding a new operator? Check this short guide Consider adding an example Dag that shows how users should use it.
• Consider using Breeze environment for testing locally, it's a heavy docker but it ships with a working Airflow and a lot of integrations.
• Be patient and persistent. It might take some time to get a review or get the final approval from Committers.
• Please follow ASF Code of Conduct for all communication including (but not limited to) comments on Pull Requests, Mailing list and Slack.
• Be sure to read the Airflow Coding style.
• Always keep your Pull Requests rebased, otherwise your build might fail due to changes not related to your commits.
  Apache Airflow is a community-driven project and together we are making it better 🚀.
  In case of doubts contact the developers at:
  Mailing List: dev@airflow.apache.org
  Slack: https://s.apache.org/airflow-slack

[pierrejeambrun]

Thanks for the PR.

[pierrejeambrun]

LGTM thanks

[bbovenzi]

Looks like some of the task states of the grid are appearing above the run bars when scrolling. (Scroll down and then look at the top of the grid view). Let's make sure we are properly hiding content that we have scrolled past.

[bbovenzi]

^ this screenshot in particular. but also visible in some of the videos

[MhussainD4772]

@bbovenzi Thanks for digging into this!! The sticky header is a width: auto block, so inside the scroll container it only spans the scroll-port. Run columns past that width had no header background behind them, and cells scrolling underneath were visible through the gap. Stretching the header with min-width: max-content makes its background cover the full scrollable width.

While verifying I found a second gap, the header's top padding left a 16px band that the sticky task name column didn't cover, so the tallest duration bar (the only one that reaches the full BAR_HEIGHT, overflowing its wrapper by 2px) peeked out above the column when it scrolled behind it. Moving that padding from the header onto its children lets the column's background span the full header height.

Verified in Safari, Firefox, and Chrome: narrow panel scrolled fully right and down, wide panel with header/body columns still aligned, and Gantt view unchanged. Rebased onto current main, which includes #69917 touching the same component.

Bug reproduced

Bug Fix [Chrome. Firefox, Safari]

BUGFIX.VIDEO.mov

Drafted-by: Claude; reviewed by @MhussainD4772.