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 9238987b28..d07eb6588b 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
@@ -23,7 +23,7 @@
             <mat-tab label="Details">
                 <mat-dialog-content>
                     <div class="dialog-tab-content flex gap-x-4">
-                        <div class="w-full">
+                        <div class="w-1/2 pr-2">
                             @switch (source.componentType) {
                                 @case (ComponentType.Processor) {
                                     <source-processor
@@ -52,7 +52,7 @@
                                 }
                             }
                         </div>
-                        <div class="w-full">
+                        <div class="w-1/2 pl-2">
                             @switch (destination.componentType) {
                                 @case (ComponentType.Processor) {
                                     <destination-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/destination/destination-funnel/destination-funnel.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/destination/destination-funnel/destination-funnel.component.html
index f8585f0727..968e714cf1 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-funnel/destination-funnel.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/destination/destination-funnel/destination-funnel.component.html
@@ -22,6 +22,8 @@
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="accent-color font-medium">{{ groupName }}</div>
+        <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ groupName }}
+        </div>
     </div>
 </div>
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/destination/destination-output-port/destination-output-port.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/destination/destination-output-port/destination-output-port.component.html
index d32331fb77..19db164b64 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-output-port/destination-output-port.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/destination/destination-output-port/destination-output-port.component.html
@@ -18,10 +18,14 @@
 <div class="flex flex-col gap-y-4">
     <div class="flex flex-col mb-5">
         <div>To Output</div>
-        <div class="accent-color font-medium">{{ name }}</div>
+        <div [title]="name" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ name }}
+        </div>
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="accent-color font-medium">{{ groupName }}</div>
+        <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ groupName }}
+        </div>
     </div>
 </div>
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/destination/destination-process-group/destination-process-group.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/destination/destination-process-group/destination-process-group.component.html
index 0b4f59dc23..2f7113926b 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-process-group/destination-process-group.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/destination/destination-process-group/destination-process-group.component.html
@@ -50,6 +50,8 @@
     }
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="accent-color font-medium">{{ groupName }}</div>
+        <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ groupName }}
+        </div>
     </div>
 </div>
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/destination/destination-processor/destination-processor.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/destination/destination-processor/destination-processor.component.html
index 13f8c5dcf0..3a0e268113 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-processor/destination-processor.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/destination/destination-processor/destination-processor.component.html
@@ -18,10 +18,16 @@
 <div class="flex flex-col gap-y-4">
     <div class="flex flex-col mb-5">
         <div>To Processor</div>
-        <div class="accent-color font-medium">{{ processorName }}</div>
+        <div
+            [title]="processorName"
+            class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ processorName }}
+        </div>
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="accent-color font-medium">{{ groupName }}</div>
+        <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ groupName }}
+        </div>
     </div>
 </div>
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/destination/destination-remote-process-group/destination-remote-process-group.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/destination/destination-remote-process-group/destination-remote-process-group.component.html
index 9aafbd3ce3..ac0bc5e578 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/destination/destination-remote-process-group/destination-remote-process-group.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/destination/destination-remote-process-group/destination-remote-process-group.component.html
@@ -49,6 +49,8 @@
     }
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="accent-color font-medium">{{ groupName }}</div>
+        <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ groupName }}
+        </div>
     </div>
 </div>
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 054d74a114..14a1bf67e3 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
@@ -25,7 +25,7 @@
             <mat-dialog-content>
                 @if (breadcrumbs$ | async; as breadcrumbs) {
                     <div class="dialog-tab-content flex gap-x-4">
-                        <div class="w-full">
+                        <div class="w-1/2 pr-2">
                             @switch (sourceType) {
                                 @case (ComponentType.Processor) {
                                     <source-processor
@@ -56,7 +56,7 @@
                                 }
                             }
                         </div>
-                        <div class="w-full">
+                        <div class="w-1/2 pl-2">
                             @switch (destinationType) {
                                 @case (ComponentType.Processor) {
                                     <destination-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/source/source-funnel/source-funnel.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/source/source-funnel/source-funnel.component.html
index be229d09e0..03f152668b 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-funnel/source-funnel.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/source/source-funnel/source-funnel.component.html
@@ -22,6 +22,8 @@
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="accent-color font-medium">{{ groupName }}</div>
+        <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ groupName }}
+        </div>
     </div>
 </div>
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/source/source-input-port/source-input-port.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/source/source-input-port/source-input-port.component.html
index f06311e726..a3fdea7f2a 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-input-port/source-input-port.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/source/source-input-port/source-input-port.component.html
@@ -18,10 +18,14 @@
 <div class="flex flex-col gap-y-4">
     <div class="flex flex-col mb-5">
         <div>From Input</div>
-        <div class="accent-color font-medium">{{ name }}</div>
+        <div [title]="name" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ name }}
+        </div>
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="accent-color font-medium">{{ groupName }}</div>
+        <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ groupName }}
+        </div>
     </div>
 </div>
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/source/source-process-group/source-process-group.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/source/source-process-group/source-process-group.component.html
index 49b8318f60..434ad96982 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-process-group/source-process-group.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/source/source-process-group/source-process-group.component.html
@@ -50,6 +50,8 @@
     }
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="accent-color font-medium">{{ groupName }}</div>
+        <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ groupName }}
+        </div>
     </div>
 </div>
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/source/source-processor/source-processor.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/source/source-processor/source-processor.component.html
index 539dfd3a78..d54f714504 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-processor/source-processor.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/source/source-processor/source-processor.component.html
@@ -18,11 +18,15 @@
 <div class="flex flex-col gap-y-4">
     <div class="flex flex-col mb-5">
         <div>From Processor</div>
-        <div class="accent-color font-medium">{{ name }}</div>
+        <div [title]="name" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ name }}
+        </div>
     </div>
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="accent-color font-medium">{{ groupName }}</div>
+        <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ groupName }}
+        </div>
     </div>
     <div class="flex flex-col">
         <div>Relationships</div>
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/source/source-remote-process-group/source-remote-process-group.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/source/source-remote-process-group/source-remote-process-group.component.html
index 92f104c052..8c3e29b01d 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/connection/source/source-remote-process-group/source-remote-process-group.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/source/source-remote-process-group/source-remote-process-group.component.html
@@ -49,6 +49,8 @@
     }
     <div class="flex flex-col mb-5">
         <div>Within Group</div>
-        <div class="accent-color font-medium">{{ groupName }}</div>
+        <div [title]="groupName" class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
+            {{ groupName }}
+        </div>
     </div>
 </div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
index 3e50d199e9..a0bc86eca2 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history.component.html
@@ -41,7 +41,9 @@
                                                 @if (detail.key && detail.value) {
                                                     <div class="flex flex-col">
                                                         <div>{{ detail.key }}</div>
-                                                        <div class="accent-color font-medium">
+                                                        <div
+                                                            [title]="detail.value"
+                                                            class="accent-color overflow-ellipsis overflow-hidden whitespace-nowrap font-medium">
                                                             {{ detail.value }}
                                                         </div>
                                                     </div>