diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
index c24cb5b096fc..9b7a5742b7e4 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
@@ -22,7 +22,7 @@ <h2 mat-dialog-title>FlowFile</h2>
             <mat-dialog-content>
                 <div class="dialog-tab-content">
                     <div class="flex gap-x-4">
-                        <div class="w-full flex flex-col gap-y-3">
+                        <div class="w-1/2 pr-2 flex flex-col gap-y-3">
                             <div class="flex flex-col">
                                 <div class="font-bold primary-color">FlowFile Details</div>
                             </div>
@@ -31,7 +31,7 @@ <h2 mat-dialog-title>FlowFile</h2>
                                 <ng-container
                                     *ngTemplateOutlet="
                                         formatCopyableValue;
-                                        context: { $implicit: request.flowfile.uuid }
+                                        context: { $implicit: request.flowfile.uuid, title: request.flowfile.uuid }
                                     "></ng-container>
                             </div>
                             <div class="flex flex-col">
@@ -39,7 +39,10 @@ <h2 mat-dialog-title>FlowFile</h2>
                                 <ng-container
                                     *ngTemplateOutlet="
                                         formatValue;
-                                        context: { $implicit: request.flowfile.filename }
+                                        context: {
+                                            $implicit: request.flowfile.filename,
+                                            title: request.flowfile.filename
+                                        }
                                     "></ng-container>
                             </div>
                             <div class="flex flex-col">
@@ -58,7 +61,10 @@ <h2 mat-dialog-title>FlowFile</h2>
                                 <ng-container
                                     *ngTemplateOutlet="
                                         formatValue;
-                                        context: { $implicit: request.flowfile.position }
+                                        context: {
+                                            $implicit: request.flowfile.position,
+                                            title: request.flowfile.position
+                                        }
                                     "></ng-container>
                             </div>
                             <div class="flex flex-col">
@@ -89,7 +95,10 @@ <h2 mat-dialog-title>FlowFile</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatValue;
-                                            context: { $implicit: request.flowfile.clusterNodeAddress }
+                                            context: {
+                                                $implicit: request.flowfile.clusterNodeAddress,
+                                                title: request.flowfile.clusterNodeAddress
+                                            }
                                         "></ng-container>
                                 </div>
                             </ng-container>
@@ -104,7 +113,7 @@ <h2 mat-dialog-title>FlowFile</h2>
                                 </ng-template>
                             </ng-template>
                         </div>
-                        <div class="w-full flex flex-col gap-y-3">
+                        <div class="w-1/2 pl-2 flex flex-col gap-y-3">
                             <div class="flex flex-col">
                                 <div class="font-bold primary-color">Content Claim</div>
                             </div>
@@ -116,7 +125,10 @@ <h2 mat-dialog-title>FlowFile</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatContentValue;
-                                            context: { $implicit: request.flowfile.contentClaimContainer }
+                                            context: {
+                                                $implicit: request.flowfile.contentClaimContainer,
+                                                title: request.flowfile.contentClaimContainer
+                                            }
                                         "></ng-container>
                                 </div>
                                 <div>
@@ -124,7 +136,10 @@ <h2 mat-dialog-title>FlowFile</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatContentValue;
-                                            context: { $implicit: request.flowfile.contentClaimSection }
+                                            context: {
+                                                $implicit: request.flowfile.contentClaimSection,
+                                                title: request.flowfile.contentClaimSection
+                                            }
                                         "></ng-container>
                                 </div>
                                 <div>
@@ -132,7 +147,10 @@ <h2 mat-dialog-title>FlowFile</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatCopyableContentValue;
-                                            context: { $implicit: request.flowfile.contentClaimIdentifier }
+                                            context: {
+                                                $implicit: request.flowfile.contentClaimIdentifier,
+                                                title: request.flowfile.contentClaimIdentifier
+                                            }
                                         "></ng-container>
                                 </div>
                                 <div>
@@ -140,7 +158,10 @@ <h2 mat-dialog-title>FlowFile</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatContentValue;
-                                            context: { $implicit: request.flowfile.contentClaimOffset }
+                                            context: {
+                                                $implicit: request.flowfile.contentClaimOffset,
+                                                title: request.flowfile.contentClaimOffset
+                                            }
                                         "></ng-container>
                                 </div>
                                 <div>
@@ -191,7 +212,7 @@ <h2 mat-dialog-title>FlowFile</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatValue;
-                                            context: { $implicit: attribute.value }
+                                            context: { $implicit: attribute.value, title: attribute.value }
                                         "></ng-container>
                                 </div>
                             </div>
@@ -211,7 +232,7 @@ <h2 mat-dialog-title>FlowFile</h2>
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
-                    <div class="tertiary-color font-medium" [title]="title">{{ value }}</div>
+                    <div class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
                 </ng-template>
             </ng-template>
         </ng-container>
@@ -229,7 +250,7 @@ <h2 mat-dialog-title>FlowFile</h2>
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
-                    <div [copy]="value" class="tertiary-color font-medium" [title]="title">{{ value }}</div>
+                    <div [copy]="value" class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
                 </ng-template>
             </ng-template>
         </ng-container>
@@ -244,7 +265,7 @@ <h2 mat-dialog-title>FlowFile</h2>
                 {{ value }}
             </div>
             <ng-template #valueWithTitle>
-                <div class="tertiary-color font-medium" [title]="title">{{ value }}</div>
+                <div class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
             </ng-template>
         </ng-container>
         <ng-template #nullValue>
@@ -257,7 +278,7 @@ <h2 mat-dialog-title>FlowFile</h2>
                 {{ value }}
             </div>
             <ng-template #valueWithTitle>
-                <div [copy]="value" class="tertiary-color font-medium" [title]="title">{{ value }}</div>
+                <div [copy]="value" class="tertiary-color font-medium truncate" [title]="title">{{ value }}</div>
             </ng-template>
         </ng-container>
         <ng-template #nullValue>
diff --git a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
index 6b545f279296..ba3bd39bdc44 100644
--- a/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
+++ b/nifi-frontend/src/main/frontend/apps/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
@@ -28,7 +28,7 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                 <ng-container
                                     *ngTemplateOutlet="
                                         formatValue;
-                                        context: { $implicit: request.event.eventTime }
+                                        context: { $implicit: request.event.eventTime, title: request.event.eventTime }
                                     "></ng-container>
                             </div>
                             <div class="flex flex-col">
@@ -52,7 +52,7 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                 <ng-container
                                     *ngTemplateOutlet="
                                         formatValue;
-                                        context: { $implicit: request.event.eventType }
+                                        context: { $implicit: request.event.eventType, title: request.event.eventType }
                                     "></ng-container>
                             </div>
                             <div class="flex flex-col">
@@ -60,7 +60,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                 <ng-container
                                     *ngTemplateOutlet="
                                         formatCopyableValue;
-                                        context: { $implicit: request.event.flowFileUuid }
+                                        context: {
+                                            $implicit: request.event.flowFileUuid,
+                                            title: request.event.flowFileUuid
+                                        }
                                     "></ng-container>
                             </div>
                             <div class="flex flex-col">
@@ -79,7 +82,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                 <ng-container
                                     *ngTemplateOutlet="
                                         formatCopyableValue;
-                                        context: { $implicit: request.event.componentId }
+                                        context: {
+                                            $implicit: request.event.componentId,
+                                            title: request.event.componentId
+                                        }
                                     "></ng-container>
                             </div>
                             <div class="flex flex-col">
@@ -98,7 +104,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                 <ng-container
                                     *ngTemplateOutlet="
                                         formatValue;
-                                        context: { $implicit: request.event.componentType }
+                                        context: {
+                                            $implicit: request.event.componentType,
+                                            title: request.event.componentType
+                                        }
                                     "></ng-container>
                             </div>
                             <div class="flex flex-col">
@@ -106,7 +115,7 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                 <ng-container
                                     *ngTemplateOutlet="
                                         formatValue;
-                                        context: { $implicit: request.event.details }
+                                        context: { $implicit: request.event.details, title: request.event.details }
                                     "></ng-container>
                             </div>
                             <ng-container *ngIf="request.event.eventType === 'RECEIVE'">
@@ -115,7 +124,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatCopyableValue;
-                                            context: { $implicit: request.event.sourceSystemFlowFileId }
+                                            context: {
+                                                $implicit: request.event.sourceSystemFlowFileId,
+                                                title: request.event.sourceSystemFlowFileId
+                                            }
                                         "></ng-container>
                                 </div>
                                 <div class="flex flex-col">
@@ -123,7 +135,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatValue;
-                                            context: { $implicit: request.event.transitUri }
+                                            context: {
+                                                $implicit: request.event.transitUri,
+                                                title: request.event.transitUri
+                                            }
                                         "></ng-container>
                                 </div>
                             </ng-container>
@@ -133,7 +148,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatValue;
-                                            context: { $implicit: request.event.transitUri }
+                                            context: {
+                                                $implicit: request.event.transitUri,
+                                                title: request.event.transitUri
+                                            }
                                         "></ng-container>
                                 </div>
                             </ng-container>
@@ -143,7 +161,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatValue;
-                                            context: { $implicit: request.event.alternateIdentifierUri }
+                                            context: {
+                                                $implicit: request.event.alternateIdentifierUri,
+                                                title: request.event.alternateIdentifierUri
+                                            }
                                         "></ng-container>
                                 </div>
                             </ng-container>
@@ -153,7 +174,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatValue;
-                                            context: { $implicit: request.event.relationship }
+                                            context: {
+                                                $implicit: request.event.relationship,
+                                                title: request.event.relationship
+                                            }
                                         "></ng-container>
                                 </div>
                             </ng-container>
@@ -163,7 +187,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatValue;
-                                            context: { $implicit: request.event.transitUri }
+                                            context: {
+                                                $implicit: request.event.transitUri,
+                                                title: request.event.transitUri
+                                            }
                                         "></ng-container>
                                 </div>
                             </ng-container>
@@ -173,7 +200,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatValue;
-                                            context: { $implicit: request.event.clusterNodeAddress }
+                                            context: {
+                                                $implicit: request.event.clusterNodeAddress,
+                                                title: request.event.clusterNodeAddress
+                                            }
                                         "></ng-container>
                                 </div>
                             </ng-container>
@@ -243,13 +273,16 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 formatValue;
-                                                context: { $implicit: attribute.value }
+                                                context: { $implicit: attribute.value, title: attribute.value }
                                             "></ng-container>
                                         <ng-container *ngIf="attributeValueChanged(attribute)">
                                             <ng-container
                                                 *ngTemplateOutlet="
                                                     formatValue;
-                                                    context: { $implicit: attribute.previousValue }
+                                                    context: {
+                                                        $implicit: attribute.previousValue,
+                                                        title: attribute.previousValue
+                                                    }
                                                 "></ng-container>
                                         </ng-container>
                                     </div>
@@ -273,7 +306,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 formatContentValue;
-                                                context: { $implicit: request.event.inputContentClaimContainer }
+                                                context: {
+                                                    $implicit: request.event.inputContentClaimContainer,
+                                                    title: request.event.inputContentClaimContainer
+                                                }
                                             "></ng-container>
                                     </div>
                                     <div>
@@ -281,7 +317,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 formatContentValue;
-                                                context: { $implicit: request.event.inputContentClaimSection }
+                                                context: {
+                                                    $implicit: request.event.inputContentClaimSection,
+                                                    title: request.event.inputContentClaimContainer
+                                                }
                                             "></ng-container>
                                     </div>
                                     <div>
@@ -289,7 +328,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 formatCopyableContentValue;
-                                                context: { $implicit: request.event.inputContentClaimIdentifier }
+                                                context: {
+                                                    $implicit: request.event.inputContentClaimIdentifier,
+                                                    title: request.event.inputContentClaimIdentifier
+                                                }
                                             "></ng-container>
                                     </div>
                                     <div>
@@ -297,7 +339,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 formatContentValue;
-                                                context: { $implicit: request.event.inputContentClaimOffset }
+                                                context: {
+                                                    $implicit: request.event.inputContentClaimOffset,
+                                                    title: request.event.inputContentClaimOffset
+                                                }
                                             "></ng-container>
                                     </div>
                                     <div>
@@ -335,7 +380,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 formatContentValue;
-                                                context: { $implicit: request.event.outputContentClaimContainer }
+                                                context: {
+                                                    $implicit: request.event.outputContentClaimContainer,
+                                                    title: request.event.outputContentClaimContainer
+                                                }
                                             "></ng-container>
                                     </div>
                                     <div>
@@ -343,7 +391,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 formatContentValue;
-                                                context: { $implicit: request.event.outputContentClaimSection }
+                                                context: {
+                                                    $implicit: request.event.outputContentClaimSection,
+                                                    title: request.event.outputContentClaimSection
+                                                }
                                             "></ng-container>
                                     </div>
                                     <div>
@@ -351,7 +402,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 formatCopyableContentValue;
-                                                context: { $implicit: request.event.outputContentClaimIdentifier }
+                                                context: {
+                                                    $implicit: request.event.outputContentClaimIdentifier,
+                                                    title: request.event.outputContentClaimIdentifier
+                                                }
                                             "></ng-container>
                                     </div>
                                     <div>
@@ -359,7 +413,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                         <ng-container
                                             *ngTemplateOutlet="
                                                 formatContentValue;
-                                                context: { $implicit: request.event.outputContentClaimOffset }
+                                                context: {
+                                                    $implicit: request.event.outputContentClaimOffset,
+                                                    title: request.event.outputContentClaimOffset
+                                                }
                                             "></ng-container>
                                     </div>
                                     <div>
@@ -400,7 +457,10 @@ <h2 mat-dialog-title>Provenance Event</h2>
                                     <ng-container
                                         *ngTemplateOutlet="
                                             formatCopyableContentValue;
-                                            context: { $implicit: request.event.sourceConnectionIdentifier }
+                                            context: {
+                                                $implicit: request.event.sourceConnectionIdentifier,
+                                                title: request.event.sourceConnectionIdentifier
+                                            }
                                         "></ng-container>
                                 </div>
                                 <div>
@@ -425,15 +485,11 @@ <h2 mat-dialog-title>Provenance Event</h2>
                 <div class="unset neutral-color">Empty string set</div>
             </ng-container>
             <ng-template #nonEmptyValue>
-                <div
-                    class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                    *ngIf="title == null; else valueWithTitle">
+                <div class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
-                    <div
-                        class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                        [title]="title">
+                    <div class="tertiary-color font-medium truncate" [title]="title">
                         {{ value }}
                     </div>
                 </ng-template>
@@ -451,15 +507,12 @@ <h2 mat-dialog-title>Provenance Event</h2>
             <ng-template #nonEmptyValue>
                 <div
                     [copy]="value"
-                    class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                    class="tertiary-color font-medium"
                     *ngIf="title == null; else valueWithTitle">
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
-                    <div
-                        [copy]="value"
-                        class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                        [title]="title">
+                    <div [copy]="value" class="tertiary-color font-medium truncate" [title]="title">
                         {{ value }}
                     </div>
                 </ng-template>
@@ -471,15 +524,11 @@ <h2 mat-dialog-title>Provenance Event</h2>
     </ng-template>
     <ng-template #formatContentValue let-value let-title="title">
         <ng-container *ngIf="value != null; else nullValue">
-            <div
-                class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                *ngIf="title == null; else valueWithTitle">
+            <div class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
                 {{ value }}
             </div>
             <ng-template #valueWithTitle>
-                <div
-                    class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                    [title]="title">
+                <div class="tertiary-color font-medium truncate" [title]="title">
                     {{ value }}
                 </div>
             </ng-template>
@@ -490,17 +539,11 @@ <h2 mat-dialog-title>Provenance Event</h2>
     </ng-template>
     <ng-template #formatCopyableContentValue let-value let-title="title">
         <ng-container *ngIf="value != null; else nullValue">
-            <div
-                [copy]="value"
-                class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                *ngIf="title == null; else valueWithTitle">
+            <div [copy]="value" class="tertiary-color font-medium" *ngIf="title == null; else valueWithTitle">
                 {{ value }}
             </div>
             <ng-template #valueWithTitle>
-                <div
-                    [copy]="value"
-                    class="tertiary-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
-                    [title]="title">
+                <div [copy]="value" class="tertiary-color font-medium truncate" [title]="title">
                     {{ value }}
                 </div>
             </ng-template>