Fix asset name overflow in DAG list view #57108
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
TyrellHaywood
requested review from
bbovenzi,
jscheffl,
pierrejeambrun,
ryanahamilton and
shubhamraj-git
as code owners
Member
pierrejeambrun
left a comment
pierrejeambrun
left a comment
There was a problem hiding this comment.
Can you add a screenshot after this change?
I'm not a fan of adding hard coded width in pixel. That could still happen on small screens I guess. Instead we could wrap/word break if it's too big.
pierrejeambrun
added
the
backport-to-v3-1-test
- Add maxWidth constraint to HStack containers in AssetSchedule component - Prevents asset names from overlapping with Latest Run column
TyrellHaywood
force-pushed
the
fix-asset-overflow
branch
from
f21b69d to
d8defcf
Compare
Contributor
Author
|
Thanks for the feedback! Yes that makes more sense. I've updated the approach to use word-break instead of a hard-coded pixel width. The asset names now wrap to a maximum of 2 lines before truncating with ellipsis, which prevents overflow while keeping the layout clean. Here's a screenshot showing the fix with long asset names: Let me know if this looks good! |
airflow-core/src/airflow/ui/src/pages/DagsList/AssetSchedule.tsx
Outdated
Show resolved
Hide resolved
Member
|
I just pushed a commit to use the existing component instead: |
pierrejeambrun
force-pushed
the
fix-asset-overflow
branch
from
7a721e1 to
d939705
Compare
pierrejeambrun
approved these changes
Oct 27, 2025
pierrejeambrun
force-pushed
the
fix-asset-overflow
branch
from
d939705 to
01e2721
Compare
|
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 27, 2025
* Fix asset name overflow in DAG list view - Add maxWidth constraint to HStack containers in AssetSchedule component - Prevents asset names from overlapping with Latest Run column * Fix asset name overflow with word-break and line clamping * Use TruncatedText component instead --------- (cherry picked from commit 9fa4462) Co-authored-by: Tyrell H <73722828+TyrellHaywood@users.noreply.github.com> Co-authored-by: pierrejeambrun <pierrejbrun@gmail.com>
Backport successfully created: v3-1-test
|
github-actions bot
pushed a commit
to aws-mwaa/upstream-to-airflow
that referenced
this pull request
Oct 27, 2025
* Fix asset name overflow in DAG list view - Add maxWidth constraint to HStack containers in AssetSchedule component - Prevents asset names from overlapping with Latest Run column * Fix asset name overflow with word-break and line clamping * Use TruncatedText component instead --------- (cherry picked from commit 9fa4462) Co-authored-by: Tyrell H <73722828+TyrellHaywood@users.noreply.github.com> Co-authored-by: pierrejeambrun <pierrejbrun@gmail.com>
jscheffl
pushed a commit
that referenced
this pull request
Oct 27, 2025
* Fix asset name overflow in DAG list view - Add maxWidth constraint to HStack containers in AssetSchedule component - Prevents asset names from overlapping with Latest Run column * Fix asset name overflow with word-break and line clamping * Use TruncatedText component instead --------- (cherry picked from commit 9fa4462) Co-authored-by: Tyrell H <73722828+TyrellHaywood@users.noreply.github.com> Co-authored-by: pierrejeambrun <pierrejbrun@gmail.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 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.
Description:
Fixes asset names overlapping with the "Latest Run" field in the DAG list view by adding
maxWidthconstraints toHStackcontainers in theAssetSchedulecomponent.When DAGs have asset-based schedules with long asset names, the names were extending beyond their column boundaries and overlapping with the "Latest Run" timestamp field, making it difficult to read.
This change adds
maxWidth="200px"to theHStackcontainers wrapping asset names in theAssetSchedulecomponent, ensuring proper text truncation and preventing overlap with adjacent columns.closes: #56669
^ 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.