yuseok89 opened a new pull request, #76004:
URL: https://github.com/apache/airflow/pull/76004
<!-- SPDX-License-Identifier: Apache-2.0
https://www.apache.org/licenses/LICENSE-2.0 -->
<!--
Thank you for contributing!
Please provide above a brief description of the changes made in this pull
request.
Write a good git commit message following this guide:
https://chris.beams.io/posts/git-commit/
Please make sure that your code changes are covered with tests.
And in case of new features or big changes remember to adjust the
documentation.
For user-facing UI changes, please attach before/after screenshots (or a
short
screen recording) so reviewers can assess the visual impact.
Feel free to ping (in general) for the review if you do not see reaction for
a few days
(72 Hours is the minimum reaction time you can expect from volunteers) - we
sometimes miss notifications.
In case of an existing issue, reference it using one of the following:
* closes: #ISSUE
* related: #ISSUE
-->
While testing in a narrower window, I noticed that Latest Run and Next Run
sit at different positions from card to card on the Dags list. Each card is its
own grid, so a wide run state badge such as `1,000+` widens that card's first
column, and the recent runs bars widen the last column for Dags with a full run
history. Over 1,000 successful runs is common for frequently scheduled Dags.
This proposes moving the recent task badges from under Latest Run to under
Next Run, so the run state badges have room across the first two columns.
1. Move the recent task badges under Next Run and top-align both badge rows.
In cards, the run state badges wrap instead of widening a column.
2. Reserve a fixed width for the recent runs bars, so a card's columns no
longer depend on its run count.
3. Move the bar width, gaps and the 14-run card limit into
`recentRunsLayout.ts`, so the reserved width follows them.
### Before
<img width="758" height="421" alt="image"
src="https://github.com/user-attachments/assets/25cc3a41-b773-45f4-8303-28971516f935";
/>
### After
Narrower window
<img width="837" height="335" alt="image"
src="https://github.com/user-attachments/assets/e12acc41-c745-43db-a983-2cf352d31baa";
/>
Wide window
<img width="1454" height="336" alt="Screenshot 2026-10-30 at 9 54 21 AM"
src="https://github.com/user-attachments/assets/e8bf2571-3cbc-46b3-8dcb-50553cf07bb9";
/>
---
##### Was generative AI tooling used to co-author this PR?
<!--
If generative AI tooling has been used in the process of authoring this PR,
please
change below checkbox to `[X]` followed by the name of the tool, uncomment
the "Generated-by".
-->
- [x] Yes (please specify the tool below)
- Claude Code (Opus 5.5)
<!--
Generated-by: [Tool Name] following [the
guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#gen-ai-assisted-contributions)
-->
---
* Read the **[Pull Request
Guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#pull-request-guidelines)**
for more information. Note: commit author/co-author name and email in commits
become permanently public when merged.
* For fundamental code changes, an Airflow Improvement Proposal
([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvement+Proposals))
is needed.
* When adding dependency, check compliance with the [ASF 3rd Party License
Policy](https://www.apache.org/legal/resolved.html#category-x).
* For significant user-facing changes create newsfragment:
`{pr_number}.significant.rst`, in
[airflow-core/newsfragments](https://github.com/apache/airflow/tree/main/airflow-core/newsfragments).
You can add this file in a follow-up commit after the PR is created so you
know the PR number.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
