Fix: Adjust PanelButtons spacing and alignment #56570
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
anshuksi282-ksolves
requested review from
bbovenzi,
jscheffl,
pierrejeambrun,
ryanahamilton and
shubhamraj-git
as code owners
Contributor
|
Thanks! Do you mind adding a bg to the buttons while you're at it so we don't get the graph dots seeping through? |
Member
pierrejeambrun
left a comment
pierrejeambrun
left a comment
There was a problem hiding this comment.
Thanks, a few nits
Left padding on the left button group is not the same as the padding of the right button compared to the container in your picture, that looks odd.
airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
Outdated
Show resolved
Hide resolved
Contributor
Author
|
@bbovenzi Thanks for the suggestion! I’ve added a background to the buttons to prevent the graph dots from seeping through. The bg color now changes based on the active state, and hover effects are preserved. @pierrejeambrun Thanks for the feedback! I’ve removed the negative margins and adjusted the padding so that the left button group aligns properly with the right options button. Now the spacing is consistent with the container, and no manual negative margins are needed. 
|
pierrejeambrun
added
the
backport-to-v3-1-test
pierrejeambrun
approved these changes
Oct 17, 2025
Member
pierrejeambrun
left a comment
pierrejeambrun
left a comment
There was a problem hiding this comment.
Nice, a few nits before merging, looks good.
airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
Outdated
Show resolved
Hide resolved
airflow-core/src/airflow/ui/src/layouts/Details/PanelButtons.tsx
Outdated
Show resolved
Hide resolved
Contributor
Author
|
Hi @bbovenzi, @pierrejeambrun, Thanks for your suggestions! All spacing, alignment, and background fixes remain intact. Ready for final review. |
pierrejeambrun
approved these changes
Oct 22, 2025
|
Awesome work, congrats on your first merged pull request! You are invited to check our Issue Tracker for additional contributions. |
github-actions bot
pushed a commit
that referenced
this pull request
Oct 22, 2025
* fix: adjust PanelButtons spacing and alignment * Fix PanelButtons layout and button styling * Fix PanelButtons: use bg.subtle and remove unnecessary _hover (cherry picked from commit 4c35cd2) Co-authored-by: anshuksi282-ksolves <anshu.singh@ksolves.com>
Backport successfully created: v3-1-test
|
2 tasks
github-actions bot
pushed a commit
to aws-mwaa/upstream-to-airflow
that referenced
this pull request
Oct 22, 2025
) * fix: adjust PanelButtons spacing and alignment * Fix PanelButtons layout and button styling * Fix PanelButtons: use bg.subtle and remove unnecessary _hover (cherry picked from commit 4c35cd2) Co-authored-by: anshuksi282-ksolves <anshu.singh@ksolves.com>
pierrejeambrun
added a commit
that referenced
this pull request
Oct 22, 2025
…57062) * [v3-1-test] Fix Outlet Event Extra Data is Empty in Task Instance Success Listener (#54568) (#57031) Co-authored-by: Kevin Yang <85313829+sjyangkevin@users.noreply.github.com> * [v3-1-test] Fix Extra Links translation key. (#57030) (#57040) (cherry picked from commit 8d71c07) Co-authored-by: Karthikeyan Singaravelan <tir.karthi@gmail.com> * [v3-1-test] Fix dags list not rendering (#57037) (#57046) (cherry picked from commit 8668fe5) Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com> * [v3-1-test] fix(scheduler): load dag_run eagering for execution API validation (#57010) (#57045) Co-authored-by: Wei Lee <weilee.rx@gmail.com> fix(scheduler): load dag_run eagering for execution API validation (#56916)" (#56943) * [v3-1-test] Fix dag list cache invalidation on favouriting a dag (#57039) (#57047) Fix dag list cache invalidation on favouriting a dag (cherry picked from commit 4e46212) Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com> * [v3-1-test] Add new PL translations. (#56359) (#57055) (cherry picked from commit 6583b6d) * Add last missing translation for 3.1.1 (#57057) * [v3-1-test] Close German translation gaps for full UI translation 2025-10-21 (#56980) (#57048) * [v3-1-test] Fix: Adjust PanelButtons spacing and alignment (#56570) * fix: adjust PanelButtons spacing and alignment * Fix PanelButtons layout and button styling * Fix PanelButtons: use bg.subtle and remove unnecessary _hover (cherry picked from commit 4c35cd2) Co-authored-by: anshuksi282-ksolves <anshu.singh@ksolves.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Kevin Yang <85313829+sjyangkevin@users.noreply.github.com> Co-authored-by: Karthikeyan Singaravelan <tir.karthi@gmail.com> Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com> Co-authored-by: Wei Lee <weilee.rx@gmail.com> Co-authored-by: Jarek Potiuk <jarek@potiuk.com> Co-authored-by: anshuksi282-ksolves <anshu.singh@ksolves.com>
kaxil
pushed a commit
that referenced
this pull request
Oct 23, 2025
…57062) * [v3-1-test] Fix Outlet Event Extra Data is Empty in Task Instance Success Listener (#54568) (#57031) Co-authored-by: Kevin Yang <85313829+sjyangkevin@users.noreply.github.com> * [v3-1-test] Fix Extra Links translation key. (#57030) (#57040) (cherry picked from commit 8d71c07) Co-authored-by: Karthikeyan Singaravelan <tir.karthi@gmail.com> * [v3-1-test] Fix dags list not rendering (#57037) (#57046) (cherry picked from commit 8668fe5) Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com> * [v3-1-test] fix(scheduler): load dag_run eagering for execution API validation (#57010) (#57045) Co-authored-by: Wei Lee <weilee.rx@gmail.com> fix(scheduler): load dag_run eagering for execution API validation (#56916)" (#56943) * [v3-1-test] Fix dag list cache invalidation on favouriting a dag (#57039) (#57047) Fix dag list cache invalidation on favouriting a dag (cherry picked from commit 4e46212) Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com> * [v3-1-test] Add new PL translations. (#56359) (#57055) (cherry picked from commit 6583b6d) * Add last missing translation for 3.1.1 (#57057) * [v3-1-test] Close German translation gaps for full UI translation 2025-10-21 (#56980) (#57048) * [v3-1-test] Fix: Adjust PanelButtons spacing and alignment (#56570) * fix: adjust PanelButtons spacing and alignment * Fix PanelButtons layout and button styling * Fix PanelButtons: use bg.subtle and remove unnecessary _hover (cherry picked from commit 4c35cd2) Co-authored-by: anshuksi282-ksolves <anshu.singh@ksolves.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Kevin Yang <85313829+sjyangkevin@users.noreply.github.com> Co-authored-by: Karthikeyan Singaravelan <tir.karthi@gmail.com> Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com> Co-authored-by: Wei Lee <weilee.rx@gmail.com> Co-authored-by: Jarek Potiuk <jarek@potiuk.com> Co-authored-by: anshuksi282-ksolves <anshu.singh@ksolves.com>
potiuk
added a commit
that referenced
this pull request
Oct 25, 2025
… en (#57060) (#57064) * [v3-1-test] Fix Outlet Event Extra Data is Empty in Task Instance Success Listener (#54568) (#57031) Co-authored-by: Kevin Yang <85313829+sjyangkevin@users.noreply.github.com> * [v3-1-test] Fix: Adjust PanelButtons spacing and alignment (#56570) (#57062) * [v3-1-test] Fix Outlet Event Extra Data is Empty in Task Instance Success Listener (#54568) (#57031) Co-authored-by: Kevin Yang <85313829+sjyangkevin@users.noreply.github.com> * [v3-1-test] Fix Extra Links translation key. (#57030) (#57040) (cherry picked from commit 8d71c07) Co-authored-by: Karthikeyan Singaravelan <tir.karthi@gmail.com> * [v3-1-test] Fix dags list not rendering (#57037) (#57046) (cherry picked from commit 8668fe5) Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com> * [v3-1-test] fix(scheduler): load dag_run eagering for execution API validation (#57010) (#57045) Co-authored-by: Wei Lee <weilee.rx@gmail.com> fix(scheduler): load dag_run eagering for execution API validation (#56916)" (#56943) * [v3-1-test] Fix dag list cache invalidation on favouriting a dag (#57039) (#57047) Fix dag list cache invalidation on favouriting a dag (cherry picked from commit 4e46212) Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com> * [v3-1-test] Add new PL translations. (#56359) (#57055) (cherry picked from commit 6583b6d) * Add last missing translation for 3.1.1 (#57057) * [v3-1-test] Close German translation gaps for full UI translation 2025-10-21 (#56980) (#57048) * [v3-1-test] Fix: Adjust PanelButtons spacing and alignment (#56570) * fix: adjust PanelButtons spacing and alignment * Fix PanelButtons layout and button styling * Fix PanelButtons: use bg.subtle and remove unnecessary _hover (cherry picked from commit 4c35cd2) Co-authored-by: anshuksi282-ksolves <anshu.singh@ksolves.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Kevin Yang <85313829+sjyangkevin@users.noreply.github.com> Co-authored-by: Karthikeyan Singaravelan <tir.karthi@gmail.com> Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com> Co-authored-by: Wei Lee <weilee.rx@gmail.com> Co-authored-by: Jarek Potiuk <jarek@potiuk.com> Co-authored-by: anshuksi282-ksolves <anshu.singh@ksolves.com> * [v3-1-test] Add possibility of removing extra translations missing in en (#57060) Sometimes we rename/move translation - we did not have a tool to remove such dangling translations. Now we have. (cherry picked from commit 2314099) Co-authored-by: Jarek Potiuk <jarek@potiuk.com> --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Kevin Yang <85313829+sjyangkevin@users.noreply.github.com> Co-authored-by: Karthikeyan Singaravelan <tir.karthi@gmail.com> Co-authored-by: Pierre Jeambrun <pierrejbrun@gmail.com> Co-authored-by: Wei Lee <weilee.rx@gmail.com> Co-authored-by: Jarek Potiuk <jarek@potiuk.com> Co-authored-by: anshuksi282-ksolves <anshu.singh@ksolves.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fix mis-aligned padding for Graph View options buttons
Issue #56076
Description:
This PR fixes the mis-aligned padding for the Graph View options buttons in the Airflow Web UI (3.1.0rc2).
Background:
The buttons on the upper-right (and slightly on the upper-left) of the Graph View were overlapping with the splitter due to inconsistent padding.
Although this issue was previously assigned to another contributor @alisha-malik, no PR has been submitted in the past 2 weeks. I started working on it now to resolve the open UI bug.
What this PR does:
Notes:
^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named
{pr_number}.significant.rstor{issue_number}.significant.rst, in airflow-core/newsfragments.