From d5c9035ffe8f095ddec43823e2961fc6249e5198 Mon Sep 17 00:00:00 2001
From: Ekaterina Chantsova <chantsova.ekaterina@gmail.com>
Date: Mon, 2 Dec 2024 16:57:09 +0200
Subject: [PATCH] Timewindow: update styles for inputs which may have empty
 suffix

---
 .../aggregation-type-select.component.scss    |  8 +++++++
 .../time/quick-time-interval.component.scss   | 11 ++++++++++
 .../time/timeinterval.component.scss          |  8 +++++++
 ui-ngx/src/form.scss                          | 21 -------------------
 4 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.scss b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.scss
index ddc2385dfa..9cb0a0ea09 100644
--- a/ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.scss
+++ b/ui-ngx/src/app/shared/components/time/aggregation/aggregation-type-select.component.scss
@@ -26,4 +26,12 @@
   .mat-mdc-select-value {
     min-width: 100px;
   }
+  .mat-mdc-form-field-has-icon-suffix {
+    .mat-mdc-text-field-wrapper:has(.mat-mdc-form-field-icon-suffix:empty) {
+      padding-right: 12px;
+    }
+    .mat-mdc-form-field-icon-suffix:empty {
+      padding: 0;
+    }
+  }
 }
diff --git a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.scss b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.scss
index f3cd8fdfeb..e9b79fbf4c 100644
--- a/ui-ngx/src/app/shared/components/time/quick-time-interval.component.scss
+++ b/ui-ngx/src/app/shared/components/time/quick-time-interval.component.scss
@@ -24,3 +24,14 @@
     width: 100%;
   }
 }
+
+:host ::ng-deep {
+   .mat-mdc-form-field-has-icon-suffix {
+     .mat-mdc-text-field-wrapper:has(.mat-mdc-form-field-icon-suffix:empty) {
+       padding-right: 12px;
+     }
+     .mat-mdc-form-field-icon-suffix:empty {
+       padding: 0;
+     }
+   }
+ }
diff --git a/ui-ngx/src/app/shared/components/time/timeinterval.component.scss b/ui-ngx/src/app/shared/components/time/timeinterval.component.scss
index c08676fe69..482f28ebc0 100644
--- a/ui-ngx/src/app/shared/components/time/timeinterval.component.scss
+++ b/ui-ngx/src/app/shared/components/time/timeinterval.component.scss
@@ -27,6 +27,14 @@
 }
 
 :host ::ng-deep {
+  .mat-mdc-form-field-has-icon-suffix {
+    .mat-mdc-text-field-wrapper:has(.mat-mdc-form-field-icon-suffix:empty) {
+      padding-right: 12px;
+    }
+    .mat-mdc-form-field-icon-suffix:empty {
+      padding: 0;
+    }
+  }
   .number-input {
     .mat-mdc-form-field-infix {
       width: 50px;
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index 9ed6cec2e8..2a7ee6e7eb 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -381,16 +381,6 @@
         }
       }
     }
-    &.mat-mdc-form-field-has-icon-suffix {
-      .mat-mdc-form-field-icon-suffix:empty {
-        padding: 0;
-      }
-      .mat-mdc-text-field-wrapper:has(.mat-mdc-form-field-icon-suffix:empty) {
-        &.mdc-text-field--outlined, &:not(.mdc-text-field--outlined) {
-          padding-right: 12px;
-        }
-      }
-    }
     .mat-mdc-text-field-wrapper {
       &.mdc-text-field--outlined, &:not(.mdc-text-field--outlined) {
         &:not(.mdc-text-field--focused):not(.mdc-text-field--disabled):not(.mdc-text-field--invalid):not(:hover) {
@@ -799,15 +789,4 @@
       }
     }
   }
-
-  .mat-mdc-form-field-has-icon-suffix {
-    .mat-mdc-form-field-icon-suffix:empty {
-      padding: 0;
-    }
-    .mat-mdc-text-field-wrapper:has(.mat-mdc-form-field-icon-suffix:empty) {
-      &.mdc-text-field--outlined, &:not(.mdc-text-field--outlined) {
-        padding-right: 16px;
-      }
-    }
-  }
 }