NIFI-15153: Fix UI overflow by allowing long names to wrap in connect… #10709
+3
−3
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
Contributor
|
I can review. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 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.
This PR fixes a UI overflow issue in the Destination Process Group component (NIFI-15153). Previously, long Process Group names within error messages and selection labels would overflow the dialog container due to whitespace-nowrap and overflow-hidden constraints.
I have updated the HTML templates to allow for text wrapping, ensuring that long names remain visible and contained within the dialog boundaries.
Changes
Error Messages: Added break-words and w-full to mat-error elements to prevent long group names from cutting off when reporting missing or unauthorized ports.
Group Name Display: Removed overflow-ellipsis, overflow-hidden, and whitespace-nowrap.
Added break-words and w-full to allow the group name to wrap onto multiple lines if it exceeds the container width.
File Modified: destination-process-group.component.html
How to Test
Attempt to create a connection to a Process Group that has an extremely long name (e.g., 50+ characters).
Trigger an error state (e.g., a group with no local input ports).
Verify: Observe that the long name now wraps to a new line within the error message and the "Within Group" label, rather than disappearing off the edge of the dialog.