NIFI-15153: Fix UI overflow by allowing long names to wrap in connect… #10709
Conversation
|
I can review. |
scottyaslan
left a comment
scottyaslan
left a comment
There was a problem hiding this comment.
From the screenshot in the jira it looks like there is an issue somewhere in the template layout where some width is incorrectly set or more likely the containing div is not flexed or displayed correctly, or needs a w-full. I did not investigate that as I will leave that fun to you.
| <div data-qa="to-input-error-label">To Input</div> | ||
| @if (noPorts) { | ||
| <mat-error data-qa="no-ports-error">{{ groupName }} does not have any local input ports.</mat-error> | ||
| <mat-error data-qa="no-ports-error" class="tertiary-color break-words font-medium w-full">{{ groupName }} does not have any local input ports.</mat-error> |
There was a problem hiding this comment.
Please do not add tertiary-color or font-medium to mat-error components. These a colored via angular material theme and follow the typography we have defined for the entire application.
We also do not need the break-words or w-full here. Please revert this change.
| <div | ||
| [title]="groupName" | ||
| class="tertiary-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium" | ||
| class="tertiary-color break-words font-medium w-full" |
There was a problem hiding this comment.
Please restore the overflow-ellipsis overflow-hidden whitespace-nowrap in this case. Here we should follow established UX patterns which in this case would mean the text should have either the overflow-ellipsis overflow-hidden whitespace-nowrap or the truncated tailwind classes applied with a title attribute (which I see is already present in the template).
3 participants
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.