From 1e7b205cc90fc54c6533360a87524873ab43edc9 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 12 Jul 2023 15:14:42 +0300
Subject: [PATCH] UI: Fixed style in clear button for unit input

---
 .../shared/components/unit-input.component.html  |  1 +
 ui-ngx/src/form.scss                             | 16 +++++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/shared/components/unit-input.component.html b/ui-ngx/src/app/shared/components/unit-input.component.html
index 141ab322d4..3686796dbf 100644
--- a/ui-ngx/src/app/shared/components/unit-input.component.html
+++ b/ui-ngx/src/app/shared/components/unit-input.component.html
@@ -22,6 +22,7 @@
          [matAutocomplete]="unitsAutocomplete">
   <button *ngIf="unitsFormControl.value && !disabled"
           type="button"
+          class="tb-icon-24"
           matSuffix mat-icon-button aria-label="Clear"
           (click)="clear()">
     <mat-icon class="material-icons">close</mat-icon>
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index 35eb7782fe..eaec6a7f43 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -218,6 +218,19 @@
               height: 20px;
               font-size: 20px;
             }
+            .mat-mdc-button-touch-target {
+              width: 40px;
+              height: 40px;
+            }
+            &.tb-icon-24 {
+              width: 24px;
+              height: 24px;
+              padding: 0;
+              .mat-mdc-button-touch-target {
+                width: 24px;
+                height: 24px;
+              }
+            }
           }
           > .mat-icon {
             width: 20px;
@@ -278,7 +291,8 @@
       &:hover {
         .mat-mdc-text-field-wrapper {
           .mat-mdc-form-field-icon-suffix {
-            display: block;
+            display: flex;
+            align-items: center;
           }
         }
       }