[NIFI-13233] - Fix for overflow issues on change version dialog (#8837)
* [NIFI-13233] - Fix for overflow issues on change version dialog
* adjust sizing/spacing between columns per feedback
* remove unnecessary overflow-hidden classes
This closes #8837
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
index 05f5ae3..9b0d36b 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/change-version-dialog/change-version-dialog.html
@@ -22,32 +22,48 @@
<mat-dialog-content>
<div class="dialog-content flex flex-col gap-y-4 w-full">
<div class="flex flex-row w-full">
- <div class="flex flex-1 flex-col gap-y-4">
+ <div class="flex w-1/2 flex-col gap-y-4">
<div>
<div>Registry</div>
- <div class="accent-color font-medium">{{ versionControlInformation.registryName }}</div>
+ <div
+ class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+ [title]="versionControlInformation.registryName">
+ {{ versionControlInformation.registryName }}
+ </div>
</div>
<div>
<div>Bucket</div>
- <div class="accent-color font-medium">{{ versionControlInformation.bucketName }}</div>
+ <div
+ class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+ [title]="versionControlInformation.bucketName">
+ {{ versionControlInformation.bucketName }}
+ </div>
</div>
</div>
- <div class="flex flex-1 flex-col gap-y-4">
+ <div class="flex w-1/2 pl-2 flex-col gap-y-4">
<div>
@if (versionControlInformation.branch) {
<div>Branch</div>
- <div class="accent-color font-medium">{{ versionControlInformation.branch }}</div>
+ <div
+ class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+ [title]="versionControlInformation.branch">
+ {{ versionControlInformation.branch }}
+ </div>
}
</div>
<div>
<div>Flow Name</div>
- <div class="accent-color font-medium">{{ versionControlInformation.flowName }}</div>
+ <div
+ class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+ [title]="versionControlInformation.flowName">
+ {{ versionControlInformation.flowName }}
+ </div>
</div>
</div>
</div>
<div>
<div>Flow Description</div>
- <div class="accent-color font-medium">
+ <div class="accent-color font-medium break-words">
{{ versionControlInformation.flowDescription || 'No description provided' }}
</div>
</div>
