From 6151c30acd26ff1e4e33ec5525de8bf7a61a48c5 Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Fri, 3 Apr 2026 13:06:05 +0200
Subject: [PATCH] Additional reworks

---
 .../attribute/add-widget-to-dashboard-dialog.component.html | 6 +++---
 .../attribute/delete-timeseries-panel.component.html        | 6 +++---
 .../attribute/delete-timeseries-panel.component.scss        | 2 +-
 .../components/device/device-credentials.component.html     | 2 +-
 .../home/dialogs/add-entities-to-edge-dialog.component.html | 1 +
 .../home/dialogs/assign-to-customer-dialog.component.html   | 1 +
 6 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
index 4fc7c6a911..41d5d69edb 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/add-widget-to-dashboard-dialog.component.html
@@ -33,7 +33,7 @@
     <fieldset [disabled]="isLoading$ | async">
       <mat-radio-group formControlName="addToDashboardType">
         <mat-radio-button [value]="0" color="primary">
-          <section class="flex flex-col" style="width: 300px;">
+          <section class="flex flex-col gap-1" style="width: 300px;">
             <span translate>dashboard.select-existing</span>
             <tb-dashboard-autocomplete formControlName="dashboardId"
                                        appearance="outline"
@@ -43,9 +43,9 @@
           </section>
         </mat-radio-button>
         <mat-radio-button [value]="1" color="primary">
-          <section class="flex flex-col" style="width: 300px;">
+          <section class="flex flex-col gap-1" style="width: 300px;">
             <span translate>dashboard.create-new</span>
-            <mat-form-field class="mat-block">
+            <mat-form-field class="mat-block" appearance="outline">
               <mat-label translate>dashboard.new-dashboard-title</mat-label>
               <input matInput formControlName="newDashboardTitle"
                      [required]="addWidgetFormGroup.get('addToDashboardType').value === 1">
diff --git a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
index e2aca6e139..251496096b 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.html
@@ -25,7 +25,7 @@
   </button>
 </mat-toolbar>
 <form [formGroup]="deleteTimeseriesFormGroup" class="mat-content mat-padding tb-form-settings">
-  <mat-form-field class="mat-block" subscriptSizing="dynamic">
+  <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
     <mat-label translate>attribute.delete-timeseries.strategy</mat-label>
     <mat-select formControlName="strategy">
       @for (strategy of strategiesTranslationsMap.keys(); track strategy) {
@@ -37,13 +37,13 @@
   </mat-form-field>
   @if (isPeriodStrategy()) {
     <div class="tb-select-interval">
-      <mat-form-field class="mat-block" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
         <mat-label translate>attribute.delete-timeseries.start-time</mat-label>
         <mat-datetimepicker-toggle [for]="startDateTimePicker" matPrefix></mat-datetimepicker-toggle>
         <mat-datetimepicker #startDateTimePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
         <input required matInput formControlName="startDateTime" [matDatetimepicker]="startDateTimePicker">
       </mat-form-field>
-      <mat-form-field class="mat-block" subscriptSizing="dynamic">
+      <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline">
         <mat-label translate>attribute.delete-timeseries.ends-on</mat-label>
         <mat-datetimepicker-toggle [for]="endDatePicker" matPrefix></mat-datetimepicker-toggle>
         <mat-datetimepicker #endDatePicker type="datetime" openOnFocus="true"></mat-datetimepicker>
diff --git a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
index c42ab55735..4a5969afe7 100644
--- a/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
+++ b/ui-ngx/src/app/modules/home/components/attribute/delete-timeseries-panel.component.scss
@@ -26,7 +26,7 @@
     display: flex;
     flex-direction: column;
     gap: 16px;
-    padding-top: 0;
+    padding-top: 4px;
   }
 
   .tb-select-interval {
diff --git a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
index fb9332018a..03e1ae1222 100644
--- a/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
+++ b/ui-ngx/src/app/modules/home/components/device/device-credentials.component.html
@@ -62,7 +62,7 @@
     @case (deviceCredentialsType.X509_CERTIFICATE) {
       <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>device.certificate-pem-format</mat-label>
-        <textarea matInput formControlName="credentialsValue" cols="15" rows="5" required></textarea>
+        <textarea matInput formControlName="credentialsValue" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1" required></textarea>
         @if (deviceCredentialsFormGroup.get('credentialsValue').value) {
           <tb-copy-button
             matSuffix
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
index 599b217e61..4aed4a41b8 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
@@ -37,6 +37,7 @@
       <tb-entity-list
         formControlName="entityIds"
         required
+        appearance="outline"
         [entityType]="entityType"
         [subType]="subType">
       </tb-entity-list>
diff --git a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
index 1e105ff86a..efa6ef3c1c 100644
--- a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
@@ -36,6 +36,7 @@
       <div style="padding-bottom: 0.5em;">{{ assignToCustomerText | translate }}</div>
       <tb-entity-autocomplete
         formControlName="customerId"
+        appearance="outline"
         required
         [entityType]="entityType.CUSTOMER">
       </tb-entity-autocomplete>