From 326df914bc1169267e88d3286ef27551d56d05aa Mon Sep 17 00:00:00 2001
From: Matt Gilman <matt.c.gilman@gmail.com>
Date: Thu, 9 May 2024 14:41:06 -0400
Subject: [PATCH] NIFI-13175: Updating dialog layout and sizes to prevent a
 double scroll bar on smaller screen sizes (#8779)

* NIFI-13175:
- Updating dialog layout and sizes to prevent a double scroll bar on smaller screen sizes. Now the dialog content is set to 50vh and content scrolls as needed.

* NIFI-13175:
- Removing some unneeded padding.

* NIFI-13175:
- Fixing double scroll bar issues in non tabbed dialogs.

* NIFI-13175:
- Fixing double scroll bar issues in more non tabbed dialogs.

* NIFI-13175:
- Renaming dialog content style in status history to avoid conflicting with new general style.

This closes #8779
---
 .../action-details.component.scss             |  11 +-
 .../create-connection.component.html          |  22 +-
 .../create-connection.component.scss          |  10 -
 .../edit-connection.component.html            |  22 +-
 .../edit-connection.component.scss            |  10 -
 .../change-version-dialog.html                |   6 +-
 .../local-changes-dialog.html                 |   2 +-
 .../local-changes-table.html                  |   4 +-
 .../edit-label/edit-label.component.html      |   2 +-
 .../edit-process-group.component.html         |  22 +-
 .../edit-process-group.component.scss         |  10 -
 .../edit-processor.component.html             |  48 +-
 .../edit-processor.component.scss             |  10 -
 ...create-remote-process-group.component.html |   2 +-
 .../edit-remote-process-group.component.html  |   6 +-
 .../edit-parameter-context.component.html     |  32 +-
 .../edit-parameter-context.component.scss     |  15 -
 .../parameter-table.component.html            |   6 +-
 .../flowfile-dialog.component.html            |  70 +--
 .../flowfile-dialog.component.scss            |  17 +-
 .../edit-flow-analysis-rule.component.html    |  32 +-
 .../edit-flow-analysis-rule.component.scss    |  10 -
 .../edit-parameter-provider.component.html    |  35 +-
 .../edit-parameter-provider.component.scss    |  10 -
 ...rameter-provider-parameters.component.html |   2 +-
 ...rameter-provider-parameters.component.scss |  10 -
 .../edit-registry-client.component.html       |  24 +-
 .../edit-registry-client.component.scss       |  10 -
 .../edit-reporting-task.component.html        |  32 +-
 .../edit-reporting-task.component.scss        |  10 -
 .../cluster-summary-dialog.component.html     |   6 +-
 .../cluster-summary-dialog.component.scss     |  17 +-
 .../connection-cluster-table.component.html   |   4 +-
 .../port-cluster-table.component.html         |   4 +-
 ...process-group-cluster-table.component.html |   4 +-
 .../processor-cluster-table.component.html    |   4 +-
 ...process-group-cluster-table.component.html |   4 +-
 .../user-access-policies.component.html       |   6 +-
 .../component-state.component.html            |  82 ++--
 .../disable-controller-service.component.scss |   5 -
 .../edit-controller-service.component.html    |  32 +-
 .../edit-controller-service.component.scss    |  10 -
 .../enable-controller-service.component.scss  |   5 -
 .../extension-creation.component.html         | 144 +++---
 .../property-table.component.html             |   6 +-
 .../provenance-event-dialog.component.html    |  81 ++--
 .../provenance-event-dialog.component.scss    |  15 +-
 .../status-history-chart.component.ts         |   4 +-
 .../status-history.component.html             |   2 +-
 .../system-diagnostics-dialog.component.html  | 434 +++++++++---------
 .../system-diagnostics-dialog.component.scss  |   9 +-
 .../src/main/nifi/src/assets/styles/_app.scss |   9 +
 52 files changed, 637 insertions(+), 752 deletions(-)

diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.scss
index e54ff14552..41941962bd 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-configuration-history/ui/flow-configuration-history-listing/action-details/action-details.component.scss
@@ -17,14 +17,9 @@
 
 .action-details {
     .action-details-content {
-        .mdc-dialog__content {
-            padding: 0 16px;
-            font-size: 14px;
-
-            .panel-content {
-                position: relative;
-                overflow-y: auto;
-            }
+        .panel-content {
+            position: relative;
+            overflow-y: auto;
         }
     }
 }
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 c00bc2622c..9238987b28 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
@@ -19,10 +19,10 @@
 @if (breadcrumbs$ | async; as breadcrumbs) {
     <form class="create-connection-form" [formGroup]="createConnectionForm">
         <error-banner></error-banner>
-        <mat-dialog-content>
-            <mat-tab-group>
-                <mat-tab label="Details">
-                    <div class="tab-content py-4 flex gap-x-4">
+        <mat-tab-group>
+            <mat-tab label="Details">
+                <mat-dialog-content>
+                    <div class="dialog-tab-content flex gap-x-4">
                         <div class="w-full">
                             @switch (source.componentType) {
                                 @case (ComponentType.Processor) {
@@ -82,9 +82,11 @@
                             }
                         </div>
                     </div>
-                </mat-tab>
-                <mat-tab label="Settings">
-                    <div class="tab-content py-4 flex gap-x-4">
+                </mat-dialog-content>
+            </mat-tab>
+            <mat-tab label="Settings">
+                <mat-dialog-content>
+                    <div class="dialog-tab-content flex gap-x-4">
                         <div class="w-full">
                             <div>
                                 <mat-form-field>
@@ -171,9 +173,9 @@
                                 formControlName="prioritizers"></prioritizers>
                         </div>
                     </div>
-                </mat-tab>
-            </mat-tab-group>
-        </mat-dialog-content>
+                </mat-dialog-content>
+            </mat-tab>
+        </mat-tab-group>
         @if ({ value: (saving$ | async)! }; as saving) {
             <mat-dialog-actions align="end">
                 <button mat-button mat-dialog-close>Cancel</button>
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.scss 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.scss
index 6c71baa631..b7499a313a 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.scss
+++ 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.scss
@@ -20,16 +20,6 @@
 .create-connection-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            height: 475px;
-            overflow-y: auto;
-        }
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
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 18d1c4edc1..054d74a114 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
@@ -20,11 +20,11 @@
 </h2>
 <form class="edit-connection-form" [formGroup]="editConnectionForm">
     <error-banner></error-banner>
-    <mat-dialog-content>
-        <mat-tab-group>
-            <mat-tab label="Details">
+    <mat-tab-group>
+        <mat-tab label="Details">
+            <mat-dialog-content>
                 @if (breadcrumbs$ | async; as breadcrumbs) {
-                    <div class="tab-content py-4 flex gap-x-4">
+                    <div class="dialog-tab-content flex gap-x-4">
                         <div class="w-full">
                             @switch (sourceType) {
                                 @case (ComponentType.Processor) {
@@ -89,9 +89,11 @@
                         </div>
                     </div>
                 }
-            </mat-tab>
-            <mat-tab label="Settings">
-                <div class="tab-content py-4 flex gap-x-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Settings">
+            <mat-dialog-content>
+                <div class="dialog-tab-content flex gap-x-4">
                     <div class="w-full">
                         <div>
                             <mat-form-field>
@@ -242,9 +244,9 @@
                             formControlName="prioritizers"></prioritizers>
                     </div>
                 </div>
-            </mat-tab>
-        </mat-tab-group>
-    </mat-dialog-content>
+            </mat-dialog-content>
+        </mat-tab>
+    </mat-tab-group>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
             @if (connectionReadonly || sourceReadonly || destinationReadonly) {
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.scss 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.scss
index 98e5f37049..f6accfb00a 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.scss
+++ 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.scss
@@ -20,16 +20,6 @@
 .edit-connection-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            height: 475px;
-            overflow-y: auto;
-        }
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
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 0521d20183..2c91bbb379 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
@@ -18,7 +18,7 @@
 <h2 mat-dialog-title>Change Version</h2>
 <div class="change-version">
     <mat-dialog-content>
-        <div class="flex flex-col gap-y-4 w-full">
+        <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>
@@ -48,8 +48,8 @@
                 </div>
             </div>
 
-            <div class="listing-table">
-                <div class="h-48 overflow-y-auto overflow-x-hidden">
+            <div class="listing-table flex-1 relative">
+                <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
                     <table
                         mat-table
                         [dataSource]="dataSource"
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/local-changes-dialog/local-changes-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/local-changes-dialog/local-changes-dialog.html
index 8ea1775d0e..c3d59e1052 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-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/local-changes-dialog/local-changes-dialog.html
@@ -23,7 +23,7 @@
 </h2>
 <div class="local-changes">
     <mat-dialog-content>
-        <div class="flex flex-col h-full gap-y-2">
+        <div class="dialog-content flex flex-col h-full gap-y-2">
             <div>
                 The following changes have been made to
                 {{ versionControlInformation.versionControlInformation?.flowName }} (Version
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/local-changes-dialog/local-changes-table/local-changes-table.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
index dce014e7ae..23b6d035b4 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/flow/local-changes-dialog/local-changes-table/local-changes-table.html
@@ -29,8 +29,8 @@
             </div>
         </form>
     </div>
-    <div class="listing-table">
-        <div class="h-96 overflow-y-auto overflow-x-hidden">
+    <div class="listing-table flex-1 relative">
+        <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
             <table
                 mat-table
                 [dataSource]="dataSource"
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.html
index 8e66d176cc..e4beeb852b 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/label/edit-label/edit-label.component.html
@@ -22,7 +22,7 @@
         <div>
             <mat-form-field>
                 <mat-label>Label Value</mat-label>
-                <textarea matInput formControlName="value" type="text" rows="5" [readonly]="readonly"></textarea>
+                <textarea matInput formControlName="value" type="text" rows="10" [readonly]="readonly"></textarea>
             </mat-form-field>
         </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/process-group/edit-process-group/edit-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/process-group/edit-process-group/edit-process-group.component.html
index 281baba1c3..d27fb927cb 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-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/process-group/edit-process-group/edit-process-group.component.html
@@ -18,10 +18,10 @@
 <h2 mat-dialog-title>{{ readonly ? 'Process Group Details' : 'Edit Process Group' }}</h2>
 <form class="process-group-edit-form" [formGroup]="editProcessGroupForm">
     <error-banner></error-banner>
-    <mat-dialog-content>
-        <mat-tab-group>
-            <mat-tab label="Settings">
-                <div class="tab-content py-4 flex gap-x-4">
+    <mat-tab-group>
+        <mat-tab label="Settings">
+            <mat-dialog-content>
+                <div class="dialog-tab-content flex gap-x-4">
                     <div class="w-full">
                         <div>
                             <mat-form-field>
@@ -188,9 +188,11 @@
                         </div>
                     </div>
                 </div>
-            </mat-tab>
-            <mat-tab label="Comments">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Comments">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <mat-form-field>
                         <mat-label>Comments</mat-label>
                         <textarea
@@ -201,9 +203,9 @@
                             [readonly]="readonly"></textarea>
                     </mat-form-field>
                 </div>
-            </mat-tab>
-        </mat-tab-group>
-    </mat-dialog-content>
+            </mat-dialog-content>
+        </mat-tab>
+    </mat-tab-group>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
             @if (readonly) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.scss
index 50f47c8d69..6751fade34 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/process-group/edit-process-group/edit-process-group.component.scss
@@ -20,16 +20,6 @@
 .process-group-edit-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            height: 475px;
-            overflow-y: auto;
-        }
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-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/processor/edit-processor/edit-processor.component.html
index ee4a697ce3..4d8474f35d 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-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/processor/edit-processor/edit-processor.component.html
@@ -28,10 +28,10 @@
 <form class="processor-edit-form" [formGroup]="editProcessorForm">
     <error-banner></error-banner>
     <!-- TODO - Stop & Configure -->
-    <mat-dialog-content>
-        <mat-tab-group>
-            <mat-tab label="Settings">
-                <div class="tab-content py-4 flex gap-x-4">
+    <mat-tab-group>
+        <mat-tab label="Settings">
+            <mat-dialog-content>
+                <div class="dialog-tab-content flex gap-x-4">
                     <div class="w-full">
                         <div>
                             <mat-form-field>
@@ -109,9 +109,11 @@
                     </div>
                     <div class="w-full"></div>
                 </div>
-            </mat-tab>
-            <mat-tab label="Scheduling">
-                <div class="tab-content py-4 flex gap-x-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Scheduling">
+            <mat-dialog-content>
+                <div class="dialog-tab-content flex gap-x-4">
                     <div class="w-full">
                         <div>
                             <mat-form-field>
@@ -230,9 +232,11 @@
                         }
                     </div>
                 </div>
-            </mat-tab>
-            <mat-tab label="Properties">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Properties">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <property-table
                         formControlName="properties"
                         [createNewProperty]="createNewProperty"
@@ -246,31 +250,35 @@
                             request.entity.component.supportsSensitiveDynamicProperties
                         "></property-table>
                 </div>
-            </mat-tab>
-            <mat-tab label="Relationships">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Relationships">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     @if (request.entity.component.relationships.length > 0) {
                         <relationship-settings formControlName="relationshipConfiguration"></relationship-settings>
                     } @else {
                         <div class="unset surface-color">This processor has no relationships.</div>
                     }
                 </div>
-            </mat-tab>
-            <mat-tab label="Comments">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Comments">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <mat-form-field>
                         <mat-label>Comments</mat-label>
                         <textarea
                             matInput
                             formControlName="comments"
                             type="text"
-                            rows="5"
+                            rows="10"
                             [readonly]="readonly"></textarea>
                     </mat-form-field>
                 </div>
-            </mat-tab>
-        </mat-tab-group>
-    </mat-dialog-content>
+            </mat-dialog-content>
+        </mat-tab>
+    </mat-tab-group>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
             @if (readonly) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss
index 70e3437928..4f3a5f0a1a 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/processor/edit-processor/edit-processor.component.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
 .processor-edit-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            height: 475px;
-            overflow-y: auto;
-        }
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-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/remote-process-group/create-remote-process-group/create-remote-process-group.component.html
index ac278c1352..4c24e5e742 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/create-remote-process-group/create-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/remote-process-group/create-remote-process-group/create-remote-process-group.component.html
@@ -19,7 +19,7 @@
 <form class="create-remote-process-group-form" [formGroup]="createRemoteProcessGroupForm">
     <error-banner></error-banner>
     <mat-dialog-content>
-        <div class="tab-content py-4 flex gap-x-4">
+        <div class="flex gap-x-4">
             <div class="w-full">
                 <mat-form-field>
                     <mat-label>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-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/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
index 5cb1be5260..601cc252eb 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/flow-designer/ui/canvas/items/remote-process-group/edit-remote-process-group/edit-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/remote-process-group/edit-remote-process-group/edit-remote-process-group.component.html
@@ -19,15 +19,15 @@
 <form class="edit-remote-process-group-form" [formGroup]="editRemoteProcessGroupForm">
     <error-banner></error-banner>
     <mat-dialog-content>
-        <div class="flex flex-col mb-6">
+        <div class="flex flex-col mb-4">
             <div>Name</div>
             <div class="accent-color font-medium">{{ request.entity.component.name }}</div>
         </div>
-        <div class="flex flex-col mb-6">
+        <div class="flex flex-col mb-4">
             <div>Id</div>
             <div class="accent-color font-medium">{{ request.entity.component.id }}</div>
         </div>
-        <div class="tab-content py-4 flex gap-x-4">
+        <div class="flex gap-x-4">
             <div class="w-full">
                 <mat-form-field>
                     <mat-label>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
index 90baf83c0d..1a03bc7611 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.html
@@ -22,7 +22,7 @@
     <error-banner></error-banner>
     @if ((updateRequest | async)!; as requestEntity) {
         <mat-dialog-content>
-            <div class="results-content flex gap-x-8">
+            <div class="dialog-tab-content flex gap-x-8">
                 <div class="w-full flex flex-col">
                     <div>Steps To Update Parameters</div>
                     <div class="flex flex-col gap-y-1.5">
@@ -82,10 +82,10 @@
             </div>
         </mat-dialog-content>
     } @else {
-        <mat-dialog-content>
-            <mat-tab-group>
-                <mat-tab label="Settings">
-                    <div class="tab-content py-4 flex gap-x-4">
+        <mat-tab-group>
+            <mat-tab label="Settings">
+                <mat-dialog-content>
+                    <div class="dialog-tab-content flex gap-x-4">
                         <div class="w-full">
                             @if (!isNew) {
                                 <div class="flex flex-col mb-5">
@@ -144,27 +144,31 @@
                             </div>
                         </div>
                     </div>
-                </mat-tab>
-                <mat-tab label="Parameters">
-                    <div class="tab-content py-4">
+                </mat-dialog-content>
+            </mat-tab>
+            <mat-tab label="Parameters">
+                <mat-dialog-content>
+                    <div class="dialog-tab-content">
                         <parameter-table
                             formControlName="parameters"
                             [canAddParameters]="!request.parameterContext?.component?.parameterProviderConfiguration"
                             [createNewParameter]="createNewParameter"
                             [editParameter]="editParameter"></parameter-table>
                     </div>
-                </mat-tab>
-                <mat-tab label="Inheritance">
-                    <div class="tab-content py-4">
+                </mat-dialog-content>
+            </mat-tab>
+            <mat-tab label="Inheritance">
+                <mat-dialog-content>
+                    <div class="dialog-tab-content">
                         <parameter-context-inheritance
                             formControlName="inheritedParameterContexts"
                             [allParameterContexts]="
                                 (availableParameterContexts$ | async)!
                             "></parameter-context-inheritance>
                     </div>
-                </mat-tab>
-            </mat-tab-group>
-        </mat-dialog-content>
+                </mat-dialog-content>
+            </mat-tab>
+        </mat-tab-group>
     }
     @if ((updateRequest | async)!; as requestEntity) {
         <mat-dialog-actions align="end">
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.scss
index 6dc9958f59..364838b29f 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/edit-parameter-context/edit-parameter-context.component.scss
@@ -20,21 +20,6 @@
 .parameter-context-edit-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            height: 475px;
-            overflow-y: auto;
-        }
-
-        .results-content {
-            height: 523px;
-            overflow-y: auto;
-        }
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
index 4112077942..7b3536c41d 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/parameter-contexts/ui/parameter-context-listing/parameter-table/parameter-table.component.html
@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div class="parameter-table flex gap-x-3">
+<div class="parameter-table flex h-full gap-x-3">
     <div class="flex basis-2/3 flex-col gap-y-3">
         @if (canAddParameters && !isDisabled) {
             <div class="flex justify-end items-center">
@@ -24,8 +24,8 @@
                 </button>
             </div>
         }
-        <div class="listing-table">
-            <div class="h-96 overflow-y-auto overflow-x-hidden">
+        <div class="listing-table flex-1 relative">
+            <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
                 <table
                     mat-table
                     [dataSource]="dataSource"
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
index b008724c54..7eed546758 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.html
@@ -17,11 +17,11 @@
 
 <h2 mat-dialog-title>FlowFile</h2>
 <div class="flowfile">
-    <mat-dialog-content>
-        <mat-tab-group>
-            <mat-tab label="Details">
-                <div class="tab-content py-4">
-                    <div class="absolute inset-0 flex gap-x-4">
+    <mat-tab-group>
+        <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 flex-col">
                                 <div class="flowfile-header font-bold primary-color">FlowFile Details</div>
@@ -176,10 +176,12 @@
                         </div>
                     </div>
                 </div>
-            </mat-tab>
-            <mat-tab label="Attributes">
-                <div class="tab-content py-4">
-                    <div class="absolute inset-0 flex flex-col gap-y-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Attributes">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
+                    <div class="flex flex-col gap-y-4">
                         <div class="flex">
                             <div class="flowfile-header font-bold primary-color">Attribute Values</div>
                         </div>
@@ -197,40 +199,40 @@
                         </div>
                     </div>
                 </div>
-            </mat-tab>
-        </mat-tab-group>
-        <ng-template #formatValue let-value let-title="title">
-            <ng-container *ngIf="value != null; else nullValue">
-                <ng-container *ngIf="value === ''; else nonEmptyValue">
-                    <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">
-                        {{ value }}
-                    </div>
-                    <ng-template #valueWithTitle>
-                        <div class="accent-color font-medium" [title]="title">{{ value }}</div>
-                    </ng-template>
-                </ng-template>
+            </mat-dialog-content>
+        </mat-tab>
+    </mat-tab-group>
+    <ng-template #formatValue let-value let-title="title">
+        <ng-container *ngIf="value != null; else nullValue">
+            <ng-container *ngIf="value === ''; else nonEmptyValue">
+                <div class="unset surface-color">Empty string set</div>
             </ng-container>
-            <ng-template #nullValue>
-                <div class="unset surface-color">No value set</div>
-            </ng-template>
-        </ng-template>
-        <ng-template #formatContentValue let-value let-title="title">
-            <ng-container *ngIf="value != null; else nullValue">
+            <ng-template #nonEmptyValue>
                 <div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
                     <div class="accent-color font-medium" [title]="title">{{ value }}</div>
                 </ng-template>
-            </ng-container>
-            <ng-template #nullValue>
-                <div class="unset surface-color">No value previously set</div>
             </ng-template>
+        </ng-container>
+        <ng-template #nullValue>
+            <div class="unset surface-color">No value set</div>
         </ng-template>
-    </mat-dialog-content>
+    </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">
+                {{ value }}
+            </div>
+            <ng-template #valueWithTitle>
+                <div class="accent-color font-medium" [title]="title">{{ value }}</div>
+            </ng-template>
+        </ng-container>
+        <ng-template #nullValue>
+            <div class="unset surface-color">No value previously set</div>
+        </ng-template>
+    </ng-template>
     <mat-dialog-actions align="end">
         <button color="primary" mat-button mat-dialog-close>Ok</button>
     </mat-dialog-actions>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.scss
index 88fba83108..930165c811 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/queue/ui/queue-listing/flowfile-dialog/flowfile-dialog.component.scss
@@ -20,19 +20,8 @@
 .flowfile {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            position: relative;
-            height: 475px;
-            overflow-y: auto;
-
-            .flowfile-header {
-                font-size: 15px;
-                font-style: normal;
-            }
-        }
+    .flowfile-header {
+        font-size: 15px;
+        font-style: normal;
     }
 }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
index 51d4fe87eb..6a5e2306a2 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.html
@@ -27,10 +27,10 @@
 </h2>
 <form class="flow-analysis-rule-edit-form" [formGroup]="editFlowAnalysisRuleForm">
     <error-banner></error-banner>
-    <mat-dialog-content>
-        <mat-tab-group>
-            <mat-tab label="Settings">
-                <div class="tab-content py-4 flex gap-x-4">
+    <mat-tab-group>
+        <mat-tab label="Settings">
+            <mat-dialog-content>
+                <div class="dialog-tab-content flex gap-x-4">
                     <div class="w-full">
                         <mat-form-field>
                             <mat-label>Name</mat-label>
@@ -83,9 +83,11 @@
                         </div>
                     </div>
                 </div>
-            </mat-tab>
-            <mat-tab label="Properties">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Properties">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <property-table
                         formControlName="properties"
                         [createNewProperty]="createNewProperty"
@@ -94,22 +96,24 @@
                         [goToService]="goToService">
                     </property-table>
                 </div>
-            </mat-tab>
-            <mat-tab label="Comments">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Comments">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <mat-form-field>
                         <mat-label>Comments</mat-label>
                         <textarea
                             matInput
                             formControlName="comments"
                             type="text"
-                            rows="5"
+                            rows="10"
                             [readonly]="readonly"></textarea>
                     </mat-form-field>
                 </div>
-            </mat-tab>
-        </mat-tab-group>
-    </mat-dialog-content>
+            </mat-dialog-content>
+        </mat-tab>
+    </mat-tab-group>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
             @if (readonly) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.scss
index 0e3d28a171..4481542ff4 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/flow-analysis-rules/edit-flow-analysis-rule/edit-flow-analysis-rule.component.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
 .flow-analysis-rule-edit-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            height: 475px;
-            overflow-y: auto;
-        }
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html
index 4679bf1df5..a9876a97ec 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.html
@@ -25,10 +25,10 @@
 </h2>
 <form class="parameter-provider-edit-form" [formGroup]="editParameterProviderForm">
     <error-banner></error-banner>
-    <mat-dialog-content>
-        <mat-tab-group>
-            <mat-tab label="Settings">
-                <div class="tab-content py-4 flex gap-x-4">
+    <mat-tab-group>
+        <mat-tab label="Settings">
+            <mat-dialog-content>
+                <div class="dialog-tab-content flex gap-x-4">
                     <div class="w-full">
                         <div>
                             <mat-form-field>
@@ -77,10 +77,11 @@
                         </div>
                     </div>
                 </div>
-            </mat-tab>
-
-            <mat-tab label="Properties">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Properties">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <property-table
                         formControlName="properties"
                         [createNewProperty]="createNewProperty"
@@ -88,24 +89,24 @@
                         [propertyHistory]="request.history"
                         [goToService]="goToService"></property-table>
                 </div>
-            </mat-tab>
-
-            <mat-tab label="Comments">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Comments">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <mat-form-field>
                         <mat-label>Comments</mat-label>
                         <textarea
                             matInput
                             formControlName="comments"
                             type="text"
-                            rows="5"
+                            rows="10"
                             [readonly]="readonly"></textarea>
                     </mat-form-field>
                 </div>
-            </mat-tab>
-        </mat-tab-group>
-    </mat-dialog-content>
-
+            </mat-dialog-content>
+        </mat-tab>
+    </mat-tab-group>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
             @if (readonly) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.scss
index af4509a55b..35c414399f 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/edit-parameter-provider/edit-parameter-provider.component.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
 .parameter-provider-edit-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            height: 475px;
-            overflow-y: auto;
-        }
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
index 989a9c67ff..af38f93230 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.html
@@ -21,7 +21,7 @@
         <error-banner></error-banner>
 
         <mat-dialog-content *ngIf="(updateRequest | async)! as requestEntity; else fetchFormContent">
-            <div class="dialog-content flex gap-x-4 h-full w-full pt-2">
+            <div class="dialog-content flex gap-x-4 w-full pt-2">
                 <div class="flex flex-col flex-1">
                     <div class="flex flex-col mb-4">
                         <div>Name</div>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.scss
index bfa0c5ca06..3a65b19df7 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/parameter-providers/fetch-parameter-provider-parameters/fetch-parameter-provider-parameters.component.scss
@@ -20,16 +20,6 @@
 .parameter-provider-fetch-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .dialog-content {
-            height: 475px;
-            overflow-y: auto;
-        }
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
index 3a8f856d8a..0ac905fdb4 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.html
@@ -25,10 +25,10 @@
 </h2>
 <form class="edit-registry-client-form" [formGroup]="editRegistryClientForm">
     <error-banner></error-banner>
-    <mat-dialog-content>
-        <mat-tab-group>
-            <mat-tab label="Settings">
-                <div class="tab-content py-4 flex flex-col">
+    <mat-tab-group>
+        <mat-tab label="Settings">
+            <mat-dialog-content>
+                <div class="dialog-tab-content flex flex-col">
                     <div class="flex flex-col mb-5">
                         <div>Id</div>
                         <div class="accent-color font-medium">
@@ -50,13 +50,15 @@
                     <div>
                         <mat-form-field>
                             <mat-label>Description</mat-label>
-                            <textarea matInput formControlName="description" type="text"></textarea>
+                            <textarea matInput formControlName="description" type="text" rows="5"></textarea>
                         </mat-form-field>
                     </div>
                 </div>
-            </mat-tab>
-            <mat-tab label="Properties">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Properties">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <property-table
                         formControlName="properties"
                         [createNewProperty]="createNewProperty"
@@ -66,9 +68,9 @@
                             request.registryClient.component.supportsSensitiveDynamicProperties
                         "></property-table>
                 </div>
-            </mat-tab>
-        </mat-tab-group>
-    </mat-dialog-content>
+            </mat-dialog-content>
+        </mat-tab>
+    </mat-tab-group>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
             <button mat-button mat-dialog-close>Cancel</button>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.scss
index 5874955c32..432a88c785 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/registry-clients/edit-registry-client/edit-registry-client.component.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
 .edit-registry-client-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            height: 475px;
-            overflow-y: auto;
-        }
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
index 4fee4dc04e..7bbe0f07b4 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.html
@@ -27,10 +27,10 @@
 </h2>
 <form class="reporting-task-edit-form" [formGroup]="editReportingTaskForm">
     <error-banner></error-banner>
-    <mat-dialog-content>
-        <mat-tab-group>
-            <mat-tab label="Settings">
-                <div class="tab-content py-4 flex gap-x-4">
+    <mat-tab-group>
+        <mat-tab label="Settings">
+            <mat-dialog-content>
+                <div class="dialog-tab-content flex gap-x-4">
                     <div class="w-full">
                         <div class="flex">
                             <mat-form-field>
@@ -108,9 +108,11 @@
                         </div>
                     </div>
                 </div>
-            </mat-tab>
-            <mat-tab label="Properties">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Properties">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <property-table
                         formControlName="properties"
                         [createNewProperty]="createNewProperty"
@@ -122,22 +124,24 @@
                         ">
                     </property-table>
                 </div>
-            </mat-tab>
-            <mat-tab label="Comments">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Comments">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <mat-form-field>
                         <mat-label>Comments</mat-label>
                         <textarea
                             matInput
                             formControlName="comments"
                             type="text"
-                            rows="5"
+                            rows="10"
                             [readonly]="readonly"></textarea>
                     </mat-form-field>
                 </div>
-            </mat-tab>
-        </mat-tab-group>
-    </mat-dialog-content>
+            </mat-dialog-content>
+        </mat-tab>
+    </mat-tab-group>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
             @if (readonly) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.scss
index cd1e577596..17a342760b 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/settings/ui/reporting-tasks/edit-reporting-task/edit-reporting-task.component.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
 .reporting-task-edit-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            height: 475px;
-            overflow-y: auto;
-        }
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
index 38b6593e5e..2fa80f40a5 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.html
@@ -18,13 +18,13 @@
 <div class="cluster-summary flex flex-col">
     <h2 mat-dialog-title>Cluster {{ componentType }} Summary</h2>
 
-    <mat-dialog-content class="cluster-summary-content flex flex-1 h-full grow">
-        <div class="dialog-content flex flex-1 flex-col grow">
+    <mat-dialog-content>
+        <div class="cluster-summary-dialog-content flex flex-col">
             <component-context
                 [type]="componentType"
                 [name]="componentHelper.getName()"
                 [id]="componentId"></component-context>
-            <div class="flex flex-1 flex-col cluster-summary-table-container">
+            <div class="flex-1">
                 @switch (componentType) {
                     @case (ComponentType.Processor) {
                         <processor-cluster-table
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.scss
index 26ea817d08..05bf12cadf 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/cluster-summary-dialog.component.scss
@@ -19,21 +19,8 @@
 
 .cluster-summary {
     @include mat.button-density(-1);
-    overflow-y: auto;
 
-    .cluster-summary-content {
-        .mdc-dialog__content {
-            padding: 0 16px;
-            font-size: 14px;
-
-            .dialog-content {
-                min-height: 523px;
-                overflow-y: auto;
-            }
-        }
-
-        .cluster-summary-table-container {
-            min-height: 440px;
-        }
+    .cluster-summary-dialog-content {
+        height: 40vh;
     }
 }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html
index 427f878f0b..5a6b5c0b0b 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/connection-cluster-table/connection-cluster-table.component.html
@@ -15,8 +15,8 @@
   ~ limitations under the License.
   -->
 
-<div class="connection-cluster-table flex flex-1 h-full">
-    <div class="listing-table overflow-y-auto flex-1">
+<div class="connection-cluster-table relative h-full">
+    <div class="listing-table absolute inset-0 overflow-y-auto">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html
index 6eb3666b66..9c92ea465b 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/port-cluster-table/port-cluster-table.component.html
@@ -15,8 +15,8 @@
   ~ limitations under the License.
   -->
 
-<div class="port-cluster-table flex flex-1 h-full">
-    <div class="listing-table overflow-y-auto flex-1">
+<div class="port-cluster-table relative h-full">
+    <div class="listing-table absolute inset-0 overflow-y-auto">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html
index 5e0143dc59..d4231b4031 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/process-group-cluster-table/process-group-cluster-table.component.html
@@ -15,8 +15,8 @@
   ~ limitations under the License.
   -->
 
-<div class="process-group-cluster-table flex flex-1 h-full">
-    <div class="listing-table overflow-y-auto flex-1">
+<div class="process-group-cluster-table relative h-full">
+    <div class="listing-table absolute inset-0 overflow-y-auto">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html
index 2f131fc020..022aa41d4c 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/processor-cluster-table/processor-cluster-table.component.html
@@ -15,8 +15,8 @@
   ~ limitations under the License.
   -->
 
-<div class="processor-cluster-table flex flex-1 h-full">
-    <div class="listing-table overflow-y-auto flex-1">
+<div class="processor-cluster-table relative h-full">
+    <div class="listing-table absolute inset-0 overflow-y-auto">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html
index 66ece8a3ed..1f113049bb 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/summary/ui/common/cluster-summary-dialog/remote-process-group-cluster-table/remote-process-group-cluster-table.component.html
@@ -15,8 +15,8 @@
   ~ limitations under the License.
   -->
 
-<div class="remote-process-group-cluster-table flex flex-1 h-full">
-    <div class="listing-table overflow-y-auto flex-1">
+<div class="remote-process-group-cluster-table relative h-full">
+    <div class="listing-table absolute inset-0 overflow-y-auto">
         <table
             mat-table
             [dataSource]="dataSource"
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
index 207370f71b..155eeb4648 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/pages/users/ui/user-listing/user-access-policies/user-access-policies.component.html
@@ -18,13 +18,13 @@
 <div class="user-access-policies">
     <h2 mat-dialog-title>User Policies</h2>
     <mat-dialog-content>
-        <div class="flex flex-col justify-between gap-y-3">
+        <div class="dialog-content flex flex-col justify-between gap-y-3">
             <div class="flex flex-col">
                 <div>User</div>
                 <div class="accent-color font-medium">{{ request.identity }}</div>
             </div>
-            <div class="listing-table">
-                <div class="h-96 overflow-y-auto overflow-x-hidden">
+            <div class="listing-table flex-1 relative">
+                <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
                     <table
                         mat-table
                         [dataSource]="dataSource"
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
index e4cdf239ab..5e047d9ce5 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/component-state/component-state.component.html
@@ -19,7 +19,7 @@
     <h2 mat-dialog-title>Component State</h2>
     <error-banner></error-banner>
     <mat-dialog-content>
-        <div class="flex flex-col justify-between gap-y-5">
+        <div class="dialog-content flex flex-col justify-between gap-y-5">
             @if (componentName$ | async; as componentName) {
                 <div class="flex flex-col">
                     <div>Name</div>
@@ -32,7 +32,7 @@
                     {{ stateDescription }}
                 </div>
             </div>
-            <div>
+            <div class="flex flex-1 flex-col">
                 <form [formGroup]="filterForm" class="flex flex-col gap-y-2">
                     <div class="accent-color font-medium">Displaying {{ filteredEntries }} of {{ totalEntries }}</div>
                     <div class="flex justify-between items-center">
@@ -49,47 +49,49 @@
                         }
                     </div>
                 </form>
-                <div class="listing-table h-72 overflow-y-auto overflow-x-hidden">
-                    <table
-                        mat-table
-                        [dataSource]="dataSource"
-                        matSort
-                        matSortDisableClear
-                        (matSortChange)="sortData($event)"
-                        [matSortActive]="initialSortColumn"
-                        [matSortDirection]="initialSortDirection">
-                        <!-- Key Column -->
-                        <ng-container matColumnDef="key">
-                            <th mat-header-cell *matHeaderCellDef mat-sort-header>Key</th>
-                            <td mat-cell *matCellDef="let item">
-                                {{ item.key }}
-                            </td>
-                        </ng-container>
-
-                        <!-- Value Column -->
-                        <ng-container matColumnDef="value">
-                            <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
-                            <td mat-cell *matCellDef="let item" [title]="item.value">
-                                {{ item.value }}
-                            </td>
-                        </ng-container>
-
-                        <!-- Scope Column -->
-                        @if (displayedColumns.includes('scope')) {
-                            <ng-container matColumnDef="scope">
-                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Scope</th>
-                                <td mat-cell *matCellDef="let item" [title]="item.scope">
-                                    {{ item.scope }}
+                <div class="listing-table flex-1 relative">
+                    <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
+                        <table
+                            mat-table
+                            [dataSource]="dataSource"
+                            matSort
+                            matSortDisableClear
+                            (matSortChange)="sortData($event)"
+                            [matSortActive]="initialSortColumn"
+                            [matSortDirection]="initialSortDirection">
+                            <!-- Key Column -->
+                            <ng-container matColumnDef="key">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Key</th>
+                                <td mat-cell *matCellDef="let item">
+                                    {{ item.key }}
                                 </td>
                             </ng-container>
-                        }
 
-                        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-                        <tr
-                            mat-row
-                            *matRowDef="let row; let even = even; columns: displayedColumns"
-                            [class.even]="even"></tr>
-                    </table>
+                            <!-- Value Column -->
+                            <ng-container matColumnDef="value">
+                                <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
+                                <td mat-cell *matCellDef="let item" [title]="item.value">
+                                    {{ item.value }}
+                                </td>
+                            </ng-container>
+
+                            <!-- Scope Column -->
+                            @if (displayedColumns.includes('scope')) {
+                                <ng-container matColumnDef="scope">
+                                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Scope</th>
+                                    <td mat-cell *matCellDef="let item" [title]="item.scope">
+                                        {{ item.scope }}
+                                    </td>
+                                </ng-container>
+                            }
+
+                            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                            <tr
+                                mat-row
+                                *matRowDef="let row; let even = even; columns: displayedColumns"
+                                [class.even]="even"></tr>
+                        </table>
+                    </div>
                 </div>
             </div>
             @if (partialResults) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.scss
index 01e2fa4418..01f6c434c0 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/disable-controller-service/disable-controller-service.component.scss
@@ -19,9 +19,4 @@
 
 .controller-service-disable-form {
     @include mat.button-density(-1);
-
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-    }
 }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html
index 147d1f1d5e..3b37d939d1 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.html
@@ -27,10 +27,10 @@
 </h2>
 <form class="controller-service-edit-form" [formGroup]="editControllerServiceForm">
     <error-banner></error-banner>
-    <mat-dialog-content>
-        <mat-tab-group>
-            <mat-tab label="Settings">
-                <div class="tab-content py-4 flex gap-x-4">
+    <mat-tab-group>
+        <mat-tab label="Settings">
+            <mat-dialog-content>
+                <div class="dialog-tab-content flex gap-x-4">
                     <div class="w-full">
                         <div>
                             <mat-form-field>
@@ -113,9 +113,11 @@
                         </div>
                     </div>
                 </div>
-            </mat-tab>
-            <mat-tab label="Properties">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Properties">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <property-table
                         formControlName="properties"
                         [createNewProperty]="createNewProperty"
@@ -129,22 +131,24 @@
                             request.controllerService.component.supportsSensitiveDynamicProperties
                         "></property-table>
                 </div>
-            </mat-tab>
-            <mat-tab label="Comments">
-                <div class="tab-content py-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Comments">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
                     <mat-form-field>
                         <mat-label>Comments</mat-label>
                         <textarea
                             matInput
                             formControlName="comments"
                             type="text"
-                            rows="5"
+                            rows="10"
                             [readonly]="readonly"></textarea>
                     </mat-form-field>
                 </div>
-            </mat-tab>
-        </mat-tab-group>
-    </mat-dialog-content>
+            </mat-dialog-content>
+        </mat-tab>
+    </mat-tab-group>
     @if ({ value: (saving$ | async)! }; as saving) {
         <mat-dialog-actions align="end">
             @if (readonly) {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.scss
index 2ede7b4eff..916d4aa29d 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/edit-controller-service/edit-controller-service.component.scss
@@ -24,16 +24,6 @@ h2.mdc-dialog__title::before {
 .controller-service-edit-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            height: 475px;
-            overflow-y: auto;
-        }
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.scss
index cb133b8b2b..85a73c166b 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/controller-service/enable-controller-service/enable-controller-service.component.scss
@@ -20,11 +20,6 @@
 .controller-service-enable-form {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-    }
-
     .mat-mdc-form-field {
         width: 100%;
     }
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
index 99b3a2cc17..beafa7566a 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/extension-creation/extension-creation.component.html
@@ -31,22 +31,33 @@
         </div>
     </div>
     <mat-dialog-content>
-        <div class="listing-table select-none">
-            <div class="h-96 overflow-y-auto overflow-x-hidden">
-                <table
-                    mat-table
-                    [dataSource]="dataSource"
-                    matSort
-                    matSortDisableClear
-                    (matSortChange)="sortData($event)"
-                    [matSortActive]="initialSortColumn"
-                    [matSortDirection]="initialSortDirection">
-                    <!-- Type Column -->
-                    <ng-container matColumnDef="type">
-                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
-                        <td mat-cell *matCellDef="let item">
-                            @if (isSelected(item)) {
-                                <div #selectedRow>
+        <div class="flex flex-col dialog-content">
+            <div class="listing-table select-none flex-1 relative">
+                <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
+                    <table
+                        mat-table
+                        [dataSource]="dataSource"
+                        matSort
+                        matSortDisableClear
+                        (matSortChange)="sortData($event)"
+                        [matSortActive]="initialSortColumn"
+                        [matSortDirection]="initialSortDirection">
+                        <!-- Type Column -->
+                        <ng-container matColumnDef="type">
+                            <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
+                            <td mat-cell *matCellDef="let item">
+                                @if (isSelected(item)) {
+                                    <div #selectedRow>
+                                        <div
+                                            class="fa"
+                                            [class.fa-shield]="item.restricted"
+                                            [class.warn-color]="item.restricted"
+                                            nifiTooltip
+                                            [tooltipComponentType]="RestrictionsTip"
+                                            [tooltipInputData]="getRestrictionTipData(item)"></div>
+                                        {{ formatType(item) }}
+                                    </div>
+                                } @else {
                                     <div
                                         class="fa"
                                         [class.fa-shield]="item.restricted"
@@ -55,66 +66,57 @@
                                         [tooltipComponentType]="RestrictionsTip"
                                         [tooltipInputData]="getRestrictionTipData(item)"></div>
                                     {{ formatType(item) }}
-                                </div>
-                            } @else {
-                                <div
-                                    class="fa"
-                                    [class.fa-shield]="item.restricted"
-                                    [class.warn-color]="item.restricted"
-                                    nifiTooltip
-                                    [tooltipComponentType]="RestrictionsTip"
-                                    [tooltipInputData]="getRestrictionTipData(item)"></div>
-                                {{ formatType(item) }}
-                            }
-                        </td>
-                    </ng-container>
+                                }
+                            </td>
+                        </ng-container>
 
-                    <!-- Version Column -->
-                    <ng-container matColumnDef="version">
-                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Version</th>
-                        <td mat-cell *matCellDef="let item">
-                            {{ formatVersion(item) }}
-                            @if (implementsControllerService(item)) {
-                                <div
-                                    class="fa fa-list primary-color"
-                                    nifiTooltip
-                                    [tooltipComponentType]="ControllerServiceApiTip"
-                                    [tooltipInputData]="getControllerServiceApiTipData(item)"></div>
-                            }
-                        </td>
-                    </ng-container>
+                        <!-- Version Column -->
+                        <ng-container matColumnDef="version">
+                            <th mat-header-cell *matHeaderCellDef mat-sort-header>Version</th>
+                            <td mat-cell *matCellDef="let item">
+                                {{ formatVersion(item) }}
+                                @if (implementsControllerService(item)) {
+                                    <div
+                                        class="fa fa-list primary-color"
+                                        nifiTooltip
+                                        [tooltipComponentType]="ControllerServiceApiTip"
+                                        [tooltipInputData]="getControllerServiceApiTipData(item)"></div>
+                                }
+                            </td>
+                        </ng-container>
 
-                    <!-- Tags Column -->
-                    <ng-container matColumnDef="tags">
-                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Tags</th>
-                        <td mat-cell *matCellDef="let item">{{ formatTags(item) }}</td>
-                    </ng-container>
+                        <!-- Tags Column -->
+                        <ng-container matColumnDef="tags">
+                            <th mat-header-cell *matHeaderCellDef mat-sort-header>Tags</th>
+                            <td mat-cell *matCellDef="let item">{{ formatTags(item) }}</td>
+                        </ng-container>
 
-                    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-                    <tr
-                        mat-row
-                        *matRowDef="let row; let even = even; columns: displayedColumns"
-                        (click)="selectType(row)"
-                        (dblclick)="createExtension(row)"
-                        [class.selected]="isSelected(row)"
-                        [class.even]="even"></tr>
-                </table>
+                        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+                        <tr
+                            mat-row
+                            *matRowDef="let row; let even = even; columns: displayedColumns"
+                            (click)="selectType(row)"
+                            (dblclick)="createExtension(row)"
+                            [class.selected]="isSelected(row)"
+                            [class.even]="even"></tr>
+                    </table>
+                </div>
             </div>
-        </div>
-        <div class="flex flex-col pt-3">
-            @if (selectedType) {
-                <div class="flex items-center">
-                    <div class="selected-type-name font-medium accent-color">
-                        {{ formatType(selectedType) }}
+            <div class="flex flex-col pt-3">
+                @if (selectedType) {
+                    <div class="flex items-center">
+                        <div class="selected-type-name font-medium accent-color">
+                            {{ formatType(selectedType) }}
+                        </div>
+                        <div class="selected-type-bundle surface-color">{{ formatBundle(selectedType) }}</div>
                     </div>
-                    <div class="selected-type-bundle surface-color">{{ formatBundle(selectedType) }}</div>
-                </div>
-                <div class="selected-type-description" [title]="formatDescription(selectedType)">
-                    {{ formatDescription(selectedType) }}
-                </div>
-            } @else {
-                <div class="no-selected-type unset surface-color">No type selected</div>
-            }
+                    <div class="selected-type-description" [title]="formatDescription(selectedType)">
+                        {{ formatDescription(selectedType) }}
+                    </div>
+                } @else {
+                    <div class="no-selected-type unset surface-color">No type selected</div>
+                }
+            </div>
         </div>
     </mat-dialog-content>
     <mat-dialog-actions align="end">
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
index 38c56316e1..8db785eefb 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/property-table/property-table.component.html
@@ -15,7 +15,7 @@
   ~ limitations under the License.
   -->
 
-<div class="property-table flex flex-col gap-y-3">
+<div class="property-table flex flex-col h-full gap-y-3">
     <div class="flex justify-between items-center">
         <div class="font-bold">Required field</div>
         @if (!isDisabled) {
@@ -27,8 +27,8 @@
             </div>
         }
     </div>
-    <div class="listing-table">
-        <div class="h-96 overflow-y-auto overflow-x-hidden">
+    <div class="listing-table flex-1 relative">
+        <div class="absolute inset-0 overflow-y-auto overflow-x-hidden">
             <table mat-table #propertyTable [dataSource]="dataSource">
                 <!-- Property Column -->
                 <ng-container matColumnDef="property">
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 eeb593a7b5..73e06ac588 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
@@ -17,11 +17,11 @@
 
 <h2 mat-dialog-title>Provenance Event</h2>
 <div class="provenance-event">
-    <mat-dialog-content>
-        <mat-tab-group>
-            <mat-tab label="Details">
-                <div class="tab-content py-4">
-                    <div class="absolute inset-0 flex gap-x-4">
+    <mat-tab-group>
+        <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 flex-col">
                                 <div>Time</div>
@@ -219,10 +219,12 @@
                         </div>
                     </div>
                 </div>
-            </mat-tab>
-            <mat-tab label="Attributes">
-                <div class="tab-content py-4">
-                    <div class="absolute inset-0 flex flex-col gap-y-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Attributes">
+            <mat-dialog-content>
+                <div class="dialog-tab-content">
+                    <div class="flex flex-col gap-y-4">
                         <div class="flex justify-between">
                             <div class="event-header font-bold primary-color">Attribute Values</div>
                             <div class="flex items-center gap-x-1">
@@ -251,10 +253,12 @@
                         </div>
                     </div>
                 </div>
-            </mat-tab>
-            <mat-tab label="Content">
-                <div class="tab-content py-4">
-                    <div class="absolute inset-0 flex flex-col gap-y-4">
+            </mat-dialog-content>
+        </mat-tab>
+        <mat-tab label="Content">
+            <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="event-header font-bold primary-color">Input Claim</div>
@@ -415,40 +419,41 @@
                         </div>
                     </div>
                 </div>
-            </mat-tab>
-        </mat-tab-group>
-        <ng-template #formatValue let-value let-title="title">
-            <ng-container *ngIf="value != null; else nullValue">
-                <ng-container *ngIf="value === ''; else nonEmptyValue">
-                    <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">
-                        {{ value }}
-                    </div>
-                    <ng-template #valueWithTitle>
-                        <div class="accent-color font-medium" [title]="title">{{ value }}</div>
-                    </ng-template>
-                </ng-template>
+            </mat-dialog-content>
+        </mat-tab>
+    </mat-tab-group>
+    <ng-template #formatValue let-value let-title="title">
+        <ng-container *ngIf="value != null; else nullValue">
+            <ng-container *ngIf="value === ''; else nonEmptyValue">
+                <div class="unset surface-color">Empty string set</div>
             </ng-container>
-            <ng-template #nullValue>
-                <div class="unset surface-color">No value set</div>
-            </ng-template>
-        </ng-template>
-        <ng-template #formatContentValue let-value let-title="title">
-            <ng-container *ngIf="value != null; else nullValue">
+            <ng-template #nonEmptyValue>
                 <div class="accent-color font-medium" *ngIf="title == null; else valueWithTitle">
                     {{ value }}
                 </div>
                 <ng-template #valueWithTitle>
                     <div class="accent-color font-medium" [title]="title">{{ value }}</div>
                 </ng-template>
-            </ng-container>
-            <ng-template #nullValue>
-                <div class="unset surface-color">No value previously set</div>
             </ng-template>
+        </ng-container>
+        <ng-template #nullValue>
+            <div class="unset surface-color">No value set</div>
         </ng-template>
-    </mat-dialog-content>
+    </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">
+                {{ value }}
+            </div>
+            <ng-template #valueWithTitle>
+                <div class="accent-color font-medium" [title]="title">{{ value }}</div>
+            </ng-template>
+        </ng-container>
+        <ng-template #nullValue>
+            <div class="unset surface-color">No value previously set</div>
+        </ng-template>
+    </ng-template>
+
     <mat-dialog-actions align="end">
         <button mat-button mat-dialog-close>Ok</button>
     </mat-dialog-actions>
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.scss 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.scss
index f511042b11..92050df0b9 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.scss
+++ 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.scss
@@ -20,19 +20,8 @@
 .provenance-event {
     @include mat.button-density(-1);
 
-    .mdc-dialog__content {
-        padding: 0 16px;
-        font-size: 14px;
-
-        .tab-content {
-            position: relative;
-            height: 475px;
-            overflow-y: auto;
-
-            .event-header {
-                font-size: 15px;
-            }
-        }
+    .event-header {
+        font-size: 15px;
     }
 
     .mat-mdc-form-field {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts
index a46444eeb7..4dcd7fee52 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/status-history/status-history-chart/status-history-chart.component.ts
@@ -633,7 +633,7 @@ export class StatusHistoryChart {
 
         const marginTop: any = controlContainer.computedStyleMap().get('margin-top');
         const statusHistory = document.getElementsByClassName('status-history')![0];
-        const dialogContent = statusHistory.getElementsByClassName('dialog-content')![0];
+        const dialogContent = statusHistory.getElementsByClassName('status-history-dialog-content')![0];
         const descriptorContainer = document.getElementsByClassName('selected-descriptor-container')![0];
         const dialogStyles: any = dialogContent.computedStyleMap();
         const bodyHeight = document.body.getBoundingClientRect().height;
@@ -650,7 +650,7 @@ export class StatusHistoryChart {
 
     private getChartMaxWidth() {
         const statusHistory = document.getElementsByClassName('status-history')![0];
-        const dialogContent = statusHistory.getElementsByClassName('dialog-content')![0];
+        const dialogContent = statusHistory.getElementsByClassName('status-history-dialog-content')![0];
         const dialogContentStyles: any = dialogContent.computedStyleMap();
         const fullDialogStyles: any = statusHistory.computedStyleMap();
         const bodyWidth = document.body.getBoundingClientRect().width;
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 82c9a6e982..3e50d199e9 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
@@ -27,7 +27,7 @@
         <div class="status-history flex flex-col grow">
             <mat-dialog-content class="grow flex flex-1">
                 <form [formGroup]="statusHistoryForm" class="flex flex-1 h-full">
-                    <div class="dialog-content flex w-full flex-1">
+                    <div class="status-history-dialog-content flex w-full flex-1">
                         @if (isInitialLoading(statusHistoryState)) {
                             <div class="flex-1">
                                 <ngx-skeleton-loader count="3"></ngx-skeleton-loader>
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
index 012b0402df..d02d181734 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.html
@@ -19,236 +19,238 @@
     <h2 mat-dialog-title>System Diagnostics</h2>
     <error-banner></error-banner>
     <div class="system-diagnostics">
-        <mat-dialog-content>
-            <div class="dialog-content">
-                <mat-tab-group>
-                    <mat-tab label="JVM">
-                        <div class="tab-content py-4 h-full w-full">
-                            <div class="inset-0 flex gap-y-4">
-                                <div class="flex flex-col flex-1 gap-y-4">
-                                    <section>
-                                        <div class="section-header font-bold">
-                                            Heap ({{ systemDiagnostics.heapUtilization }})
+        <mat-tab-group>
+            <mat-tab label="JVM">
+                <mat-dialog-content>
+                    <div class="dialog-tab-content w-full">
+                        <div class="flex gap-y-4">
+                            <div class="flex flex-col flex-1 gap-y-4">
+                                <section>
+                                    <div class="section-header font-bold">
+                                        Heap ({{ systemDiagnostics.heapUtilization }})
+                                    </div>
+                                    <div class="flex flex-col gap-y-3">
+                                        <div class="flex flex-col">
+                                            <div>Max</div>
+                                            <div class="accent-color font-medium">
+                                                {{ systemDiagnostics.maxHeap }}
+                                            </div>
                                         </div>
+                                        <div class="flex flex-col">
+                                            <div>Total</div>
+                                            <div class="accent-color font-medium">
+                                                {{ systemDiagnostics.totalHeap }}
+                                            </div>
+                                        </div>
+                                        <div class="flex flex-col">
+                                            <div>Used</div>
+                                            <div class="accent-color font-medium">
+                                                {{ systemDiagnostics.usedHeap }}
+                                            </div>
+                                        </div>
+                                        <div class="flex flex-col">
+                                            <div>Free</div>
+                                            <div class="accent-color font-medium">
+                                                {{ systemDiagnostics.freeHeap }}
+                                            </div>
+                                        </div>
+                                    </div>
+                                </section>
+                                <section>
+                                    <div class="section-header font-bold primary-color">Garbage Collection</div>
+                                    @if (sortedGarbageCollections) {
                                         <div class="flex flex-col gap-y-3">
-                                            <div class="flex flex-col">
-                                                <div>Max</div>
-                                                <div class="accent-color font-medium">
-                                                    {{ systemDiagnostics.maxHeap }}
-                                                </div>
-                                            </div>
-                                            <div class="flex flex-col">
-                                                <div>Total</div>
-                                                <div class="accent-color font-medium">
-                                                    {{ systemDiagnostics.totalHeap }}
-                                                </div>
-                                            </div>
-                                            <div class="flex flex-col">
-                                                <div>Used</div>
-                                                <div class="accent-color font-medium">
-                                                    {{ systemDiagnostics.usedHeap }}
-                                                </div>
-                                            </div>
-                                            <div class="flex flex-col">
-                                                <div>Free</div>
-                                                <div class="accent-color font-medium">
-                                                    {{ systemDiagnostics.freeHeap }}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </section>
-                                    <section>
-                                        <div class="section-header font-bold primary-color">Garbage Collection</div>
-                                        @if (sortedGarbageCollections) {
-                                            <div class="flex flex-col gap-y-3">
-                                                @for (gc of sortedGarbageCollections; track gc) {
-                                                    <div class="flex flex-col">
-                                                        <div>{{ gc.name }}</div>
-                                                        <div class="accent-color font-medium">
-                                                            {{ gc.collectionCount }} times ({{ gc.collectionTime }})
-                                                        </div>
+                                            @for (gc of sortedGarbageCollections; track gc) {
+                                                <div class="flex flex-col">
+                                                    <div>{{ gc.name }}</div>
+                                                    <div class="accent-color font-medium">
+                                                        {{ gc.collectionCount }} times ({{ gc.collectionTime }})
                                                     </div>
-                                                }
-                                            </div>
-                                        }
-                                    </section>
-                                </div>
-                                <div class="flex flex-col flex-1 gap-y-4">
-                                    <section>
-                                        <div class="section-header font-bold">Non Heap</div>
-                                        <div class="flex flex-col gap-y-3">
-                                            <div class="flex flex-col">
-                                                <div>Max</div>
-                                                <div class="accent-color font-medium">
-                                                    {{ systemDiagnostics.maxNonHeap }}
                                                 </div>
-                                            </div>
-                                            <div class="flex flex-col">
-                                                <div>Total</div>
-                                                <div class="accent-color font-medium">
-                                                    {{ systemDiagnostics.totalNonHeap }}
-                                                </div>
-                                            </div>
-                                            <div class="flex flex-col">
-                                                <div>Used</div>
-                                                <div class="accent-color font-medium">
-                                                    {{ systemDiagnostics.usedNonHeap }}
-                                                </div>
-                                            </div>
-                                            <div class="flex flex-col">
-                                                <div>Free</div>
-                                                <div class="accent-color font-medium">
-                                                    {{ systemDiagnostics.freeNonHeap }}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </section>
-                                    <section>
-                                        <div class="section-header font-bold">Runtime</div>
-                                        <div class="flex flex-col gap-y-3">
-                                            <div class="flex flex-col">
-                                                <div>Uptime</div>
-                                                <div class="accent-color font-medium">
-                                                    {{ systemDiagnostics.uptime }}
-                                                </div>
-                                            </div>
-                                        </div>
-                                    </section>
-                                </div>
-                            </div>
-                        </div>
-                    </mat-tab>
-                    <mat-tab label="System">
-                        <div class="tab-content py-4 gap-y-6 h-full w-full flex flex-col">
-                            <div class="flex">
-                                <div class="flex flex-col flex-1 gap-y-4">
-                                    <div class="flex flex-col gap-y-3">
-                                        <div class="flex flex-col">
-                                            <div>Available Cores</div>
-                                            <div class="accent-color font-medium">
-                                                {{ systemDiagnostics.availableProcessors }}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="flex flex-col flex-1 gap-y-4">
-                                    <div class="flex flex-col gap-y-3">
-                                        <div class="flex flex-col">
-                                            <div class="flex gap-x-3 items-center">
-                                                <div>Core Load Average</div>
-                                                <i
-                                                    class="fa fa-info-circle"
-                                                    nifiTooltip
-                                                    [tooltipComponentType]="TextTip"
-                                                    tooltipInputData="Core load average for the last minute. Not available on all platforms."></i>
-                                            </div>
-                                            <div class="accent-color font-medium">
-                                                {{ formatFloat(systemDiagnostics.processorLoadAverage) }}
-                                            </div>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                            <section class="flex flex-col pr-4">
-                                <div class="section-header font-bold">FlowFile Repository Usage</div>
-                                <div>
-                                    <div class="capitalize">Usage:</div>
-                                    <mat-progress-bar
-                                        mode="determinate"
-                                        [value]="
-                                            getRepositoryStorageUsagePercent(
-                                                systemDiagnostics.flowFileRepositoryStorageUsage
-                                            )
-                                        ">
-                                    </mat-progress-bar>
-                                    <div class="accent-color font-medium">
-                                        {{ systemDiagnostics.flowFileRepositoryStorageUsage.utilization }}
-                                        ({{ systemDiagnostics.flowFileRepositoryStorageUsage.usedSpace }}
-                                        of
-                                        {{ systemDiagnostics.flowFileRepositoryStorageUsage.totalSpace }})
-                                    </div>
-                                </div>
-                            </section>
-                            <section class="flex flex-col pr-4">
-                                <div class="section-header font-bold">Content Repository Usage</div>
-                                <div class="repository-storage-container flex flex-col gap-y-2">
-                                    @for (repo of systemDiagnostics.contentRepositoryStorageUsage; track repo) {
-                                        <div>
-                                            <div class="capitalize">Usage for {{ repo.identifier }}:</div>
-                                            <mat-progress-bar
-                                                mode="determinate"
-                                                [value]="getRepositoryStorageUsagePercent(repo)">
-                                            </mat-progress-bar>
-                                            <div class="accent-color font-medium">
-                                                {{ repo.utilization }} ({{ repo.usedSpace }} of {{ repo.totalSpace }})
-                                            </div>
+                                            }
                                         </div>
                                     }
-                                </div>
-                            </section>
-                            <section class="flex flex-col pr-4">
-                                <div class="section-header font-bold">Provenance Repository Usage</div>
-                                <div class="repository-storage-container flex flex-col gap-y-2">
-                                    @for (repo of systemDiagnostics.provenanceRepositoryStorageUsage; track repo) {
-                                        <div>
-                                            <div class="capitalize">Usage for {{ repo.identifier }}:</div>
-                                            <mat-progress-bar
-                                                mode="determinate"
-                                                [value]="getRepositoryStorageUsagePercent(repo)">
-                                            </mat-progress-bar>
+                                </section>
+                            </div>
+                            <div class="flex flex-col flex-1 gap-y-4">
+                                <section>
+                                    <div class="section-header font-bold">Non Heap</div>
+                                    <div class="flex flex-col gap-y-3">
+                                        <div class="flex flex-col">
+                                            <div>Max</div>
                                             <div class="accent-color font-medium">
-                                                {{ repo.utilization }} ({{ repo.usedSpace }} of {{ repo.totalSpace }})
+                                                {{ systemDiagnostics.maxNonHeap }}
                                             </div>
                                         </div>
-                                    }
-                                </div>
-                            </section>
-                        </div>
-                    </mat-tab>
-                    <mat-tab label="Version">
-                        <div class="tab-content py-4 h-full w-full">
-                            <div class="inset-0 flex flex-col gap-y-4">
-                                <section>
-                                    <div class="section-header font-bold">NiFi</div>
-                                    <dl class="setting-attributes-list">
-                                        <dt class="font-bold">NiFi Version</dt>
-                                        <dd>{{ systemDiagnostics.versionInfo.niFiVersion }}</dd>
-                                        <dt class="font-bold">Tag</dt>
-                                        <dd>{{ systemDiagnostics.versionInfo.buildTag }}</dd>
-                                        <dt class="font-bold">Build Date/Time</dt>
-                                        <dd>{{ systemDiagnostics.versionInfo.buildTimestamp }}</dd>
-                                        <dt class="font-bold">Branch</dt>
-                                        <dd>{{ systemDiagnostics.versionInfo.buildBranch }}</dd>
-                                        <dt class="font-bold">Revision</dt>
-                                        <dd>{{ systemDiagnostics.versionInfo.buildRevision }}</dd>
-                                    </dl>
+                                        <div class="flex flex-col">
+                                            <div>Total</div>
+                                            <div class="accent-color font-medium">
+                                                {{ systemDiagnostics.totalNonHeap }}
+                                            </div>
+                                        </div>
+                                        <div class="flex flex-col">
+                                            <div>Used</div>
+                                            <div class="accent-color font-medium">
+                                                {{ systemDiagnostics.usedNonHeap }}
+                                            </div>
+                                        </div>
+                                        <div class="flex flex-col">
+                                            <div>Free</div>
+                                            <div class="accent-color font-medium">
+                                                {{ systemDiagnostics.freeNonHeap }}
+                                            </div>
+                                        </div>
+                                    </div>
                                 </section>
                                 <section>
-                                    <div class="section-header font-bold">Java</div>
-                                    <dl class="setting-attributes-list">
-                                        <dt class="font-bold">Version</dt>
-                                        <dd>{{ systemDiagnostics.versionInfo.javaVersion }}</dd>
-                                        <dt class="font-bold">Vendor</dt>
-                                        <dd>{{ systemDiagnostics.versionInfo.javaVendor }}</dd>
-                                    </dl>
-                                </section>
-                                <section>
-                                    <div class="section-header font-bold">Operating System</div>
-                                    <dl class="setting-attributes-list">
-                                        <dt class="font-bold">Name</dt>
-                                        <dd>{{ systemDiagnostics.versionInfo.osName }}</dd>
-                                        <dt class="font-bold">Version</dt>
-                                        <dd>{{ systemDiagnostics.versionInfo.osVersion }}</dd>
-                                        <dt class="font-bold">Architecture</dt>
-                                        <dd>{{ systemDiagnostics.versionInfo.osArchitecture }}</dd>
-                                    </dl>
+                                    <div class="section-header font-bold">Runtime</div>
+                                    <div class="flex flex-col gap-y-3">
+                                        <div class="flex flex-col">
+                                            <div>Uptime</div>
+                                            <div class="accent-color font-medium">
+                                                {{ systemDiagnostics.uptime }}
+                                            </div>
+                                        </div>
+                                    </div>
                                 </section>
                             </div>
                         </div>
-                    </mat-tab>
-                </mat-tab-group>
-            </div>
-        </mat-dialog-content>
+                    </div>
+                </mat-dialog-content>
+            </mat-tab>
+            <mat-tab label="System">
+                <mat-dialog-content>
+                    <div class="dialog-tab-content gap-y-6 w-full flex flex-col">
+                        <div class="flex">
+                            <div class="flex flex-col flex-1 gap-y-4">
+                                <div class="flex flex-col gap-y-3">
+                                    <div class="flex flex-col">
+                                        <div>Available Cores</div>
+                                        <div class="accent-color font-medium">
+                                            {{ systemDiagnostics.availableProcessors }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="flex flex-col flex-1 gap-y-4">
+                                <div class="flex flex-col gap-y-3">
+                                    <div class="flex flex-col">
+                                        <div class="flex gap-x-3 items-center">
+                                            <div>Core Load Average</div>
+                                            <i
+                                                class="fa fa-info-circle"
+                                                nifiTooltip
+                                                [tooltipComponentType]="TextTip"
+                                                tooltipInputData="Core load average for the last minute. Not available on all platforms."></i>
+                                        </div>
+                                        <div class="accent-color font-medium">
+                                            {{ formatFloat(systemDiagnostics.processorLoadAverage) }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <section class="flex flex-col pr-4">
+                            <div class="section-header font-bold">FlowFile Repository Usage</div>
+                            <div>
+                                <div class="capitalize">Usage:</div>
+                                <mat-progress-bar
+                                    mode="determinate"
+                                    [value]="
+                                        getRepositoryStorageUsagePercent(
+                                            systemDiagnostics.flowFileRepositoryStorageUsage
+                                        )
+                                    ">
+                                </mat-progress-bar>
+                                <div class="accent-color font-medium">
+                                    {{ systemDiagnostics.flowFileRepositoryStorageUsage.utilization }}
+                                    ({{ systemDiagnostics.flowFileRepositoryStorageUsage.usedSpace }}
+                                    of
+                                    {{ systemDiagnostics.flowFileRepositoryStorageUsage.totalSpace }})
+                                </div>
+                            </div>
+                        </section>
+                        <section class="flex flex-col pr-4">
+                            <div class="section-header font-bold">Content Repository Usage</div>
+                            <div class="repository-storage-container flex flex-col gap-y-2">
+                                @for (repo of systemDiagnostics.contentRepositoryStorageUsage; track repo) {
+                                    <div>
+                                        <div class="capitalize">Usage for {{ repo.identifier }}:</div>
+                                        <mat-progress-bar
+                                            mode="determinate"
+                                            [value]="getRepositoryStorageUsagePercent(repo)">
+                                        </mat-progress-bar>
+                                        <div class="accent-color font-medium">
+                                            {{ repo.utilization }} ({{ repo.usedSpace }} of {{ repo.totalSpace }})
+                                        </div>
+                                    </div>
+                                }
+                            </div>
+                        </section>
+                        <section class="flex flex-col pr-4">
+                            <div class="section-header font-bold">Provenance Repository Usage</div>
+                            <div class="repository-storage-container flex flex-col gap-y-2">
+                                @for (repo of systemDiagnostics.provenanceRepositoryStorageUsage; track repo) {
+                                    <div>
+                                        <div class="capitalize">Usage for {{ repo.identifier }}:</div>
+                                        <mat-progress-bar
+                                            mode="determinate"
+                                            [value]="getRepositoryStorageUsagePercent(repo)">
+                                        </mat-progress-bar>
+                                        <div class="accent-color font-medium">
+                                            {{ repo.utilization }} ({{ repo.usedSpace }} of {{ repo.totalSpace }})
+                                        </div>
+                                    </div>
+                                }
+                            </div>
+                        </section>
+                    </div>
+                </mat-dialog-content>
+            </mat-tab>
+            <mat-tab label="Version">
+                <mat-dialog-content>
+                    <div class="dialog-tab-content w-full">
+                        <div class="flex flex-col gap-y-4">
+                            <section>
+                                <div class="section-header font-bold">NiFi</div>
+                                <dl class="setting-attributes-list">
+                                    <dt class="font-bold">NiFi Version</dt>
+                                    <dd>{{ systemDiagnostics.versionInfo.niFiVersion }}</dd>
+                                    <dt class="font-bold">Tag</dt>
+                                    <dd>{{ systemDiagnostics.versionInfo.buildTag }}</dd>
+                                    <dt class="font-bold">Build Date/Time</dt>
+                                    <dd>{{ systemDiagnostics.versionInfo.buildTimestamp }}</dd>
+                                    <dt class="font-bold">Branch</dt>
+                                    <dd>{{ systemDiagnostics.versionInfo.buildBranch }}</dd>
+                                    <dt class="font-bold">Revision</dt>
+                                    <dd>{{ systemDiagnostics.versionInfo.buildRevision }}</dd>
+                                </dl>
+                            </section>
+                            <section>
+                                <div class="section-header font-bold">Java</div>
+                                <dl class="setting-attributes-list">
+                                    <dt class="font-bold">Version</dt>
+                                    <dd>{{ systemDiagnostics.versionInfo.javaVersion }}</dd>
+                                    <dt class="font-bold">Vendor</dt>
+                                    <dd>{{ systemDiagnostics.versionInfo.javaVendor }}</dd>
+                                </dl>
+                            </section>
+                            <section>
+                                <div class="section-header font-bold">Operating System</div>
+                                <dl class="setting-attributes-list">
+                                    <dt class="font-bold">Name</dt>
+                                    <dd>{{ systemDiagnostics.versionInfo.osName }}</dd>
+                                    <dt class="font-bold">Version</dt>
+                                    <dd>{{ systemDiagnostics.versionInfo.osVersion }}</dd>
+                                    <dt class="font-bold">Architecture</dt>
+                                    <dd>{{ systemDiagnostics.versionInfo.osArchitecture }}</dd>
+                                </dl>
+                            </section>
+                        </div>
+                    </div>
+                </mat-dialog-content>
+            </mat-tab>
+        </mat-tab-group>
         <mat-dialog-actions>
             <div class="flex flex-1 justify-between">
                 <div class="refresh-container flex items-center gap-x-2">
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.scss
index 11afa56e41..33cb3fad0d 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/app/ui/common/system-diagnostics-dialog/system-diagnostics-dialog.component.scss
@@ -20,13 +20,8 @@
 .system-diagnostics {
     @include mat.button-density(-1);
 
-    .tab-content {
-        position: relative;
-        height: 480px;
-
-        .section-header {
-            font-size: 15px;
-        }
+    .section-header {
+        font-size: 15px;
     }
 
     .setting-attributes-list {
diff --git a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
index e7dae5095c..069ce1217f 100644
--- a/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
+++ b/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-frontend/src/main/nifi/src/assets/styles/_app.scss
@@ -73,6 +73,11 @@
         cursor: pointer;
     }
 
+    .dialog-tab-content,
+    .dialog-content {
+        height: 50vh;
+    }
+
     .flex-2 {
         display: flex;
         flex: 2;
@@ -165,6 +170,10 @@
     .mat-mdc-paginator {
         background-color: unset !important;
     }
+
+    .mdc-dialog__content {
+        font-size: 14px !important;
+    }
 }
 
 @mixin generate-material-theme($material-theme) {