diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
index d07eb6588b..2626d70b1c 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/create-connection/create-connection.component.html
@@ -22,7 +22,7 @@
         <mat-tab-group>
             <mat-tab label="Details">
                 <mat-dialog-content>
-                    <div class="dialog-tab-content flex gap-x-4">
+                    <div class="dialog-tab-content flex">
                         <div class="w-1/2 pr-2">
                             @switch (source.componentType) {
                                 @case (ComponentType.Processor) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
index 14a1bf67e3..3af230cc7e 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/edit-connection/edit-connection.component.html
@@ -24,7 +24,7 @@
         <mat-tab label="Details">
             <mat-dialog-content>
                 @if (breadcrumbs$ | async; as breadcrumbs) {
-                    <div class="dialog-tab-content flex gap-x-4">
+                    <div class="dialog-tab-content flex">
                         <div class="w-1/2 pr-2">
                             @switch (sourceType) {
                                 @case (ComponentType.Processor) {
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 9b0d36b386..68aa33635d 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,7 +22,7 @@
     <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 w-1/2 flex-col gap-y-4">
+                <div class="w-1/2 pr-2 flex flex-col gap-y-4">
                     <div>
                         <div>Registry</div>
                         <div
@@ -40,7 +40,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="flex w-1/2 pl-2 flex-col gap-y-4">
+                <div class="w-1/2 pl-2 flex flex-col gap-y-4">
                     <div>
                         @if (versionControlInformation.branch) {
                             <div>Branch</div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
index 73e06ac588..9289b983e3 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/provenance-event-dialog/provenance-event-dialog.component.html
@@ -21,8 +21,8 @@
         <mat-tab label="Details">
             <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="flex">
+                        <div class="w-1/2 pr-2 flex flex-col gap-y-3">
                             <div class="flex flex-col">
                                 <div>Time</div>
                                 <ng-container
@@ -87,7 +87,10 @@
                                 <ng-container
                                     *ngTemplateOutlet="
                                         formatValue;
-                                        context: { $implicit: request.event.componentName }
+                                        context: {
+                                            $implicit: request.event.componentName,
+                                            title: request.event.componentName
+                                        }
                                     "></ng-container>
                             </div>
                             <div class="flex flex-col">
@@ -185,7 +188,7 @@
                                 </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="event-header font-bold primary-color">
                                     Parent FlowFiles ({{ request.event.parentUuids.length }})
@@ -259,8 +262,8 @@
             <mat-dialog-content>
                 <div class="dialog-tab-content">
                     <div class="flex flex-col gap-y-4">
-                        <div class="flex gap-x-4">
-                            <div class="w-full">
+                        <div class="flex">
+                            <div class="w-1/2 pr-2">
                                 <div class="event-header font-bold primary-color">Input Claim</div>
                                 <div class="flex flex-col gap-y-3">
                                     <div>
@@ -326,7 +329,7 @@
                                     </div>
                                 </div>
                             </div>
-                            <div class="w-full">
+                            <div class="w-1/2 pl-2">
                                 <div class="event-header font-bold primary-color">Output Claim</div>
                                 <div class="flex flex-col gap-y-3">
                                     <div>
@@ -428,11 +431,17 @@
                 <div class="unset surface-color">Empty string set</div>
             </ng-container>
             <ng-template #nonEmptyValue>
-                <div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
+                <div
+                    class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                    *ngIf="title == null; else valueWithTitle">
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
-                    <div class="accent-color font-medium" [title]="title">{{ value }}</div>
+                    <div
+                        class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                        [title]="title">
+                        {{ value }}
+                    </div>
                 </ng-template>
             </ng-template>
         </ng-container>
@@ -442,11 +451,17 @@
     </ng-template>
     <ng-template #formatContentValue let-value let-title="title">
         <ng-container *ngIf="value != null; else nullValue">
-            <div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
+            <div
+                class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                *ngIf="title == null; else valueWithTitle">
                 {{ value }}
             </div>
             <ng-template #valueWithTitle>
-                <div class="accent-color font-medium" [title]="title">{{ value }}</div>
+                <div
+                    class="accent-color font-medium overflow-ellipsis overflow-hidden whitespace-nowrap"
+                    [title]="title">
+                    {{ value }}
+                </div>
             </ng-template>
         </ng-container>
         <ng-template #nullValue>