Fix review comments

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.html

@@ -4,16 +4,9 @@
   @if (
     data.rule.configuration.thresholdMin && data.rule.configuration.thresholdMax
   ) {
-    <div
+    <div class="w-100">
-      class="w-100"
-      [ngClass]="{
-        'd-none':
-          !data.rule.configuration.thresholdMin ||
-          !data.rule.configuration.thresholdMax
-      }"
-    >
       <h6 class="mb-0">
-        <ng-container i18n>Threshold</ng-container>:
+        <ng-container i18n>Threshold range</ng-container>:
         @if (data.rule.configuration.threshold.unit === '%') {
           {{ data.settings.thresholdMin | percent: '1.2-2' }}
         } @else {
@@ -26,6 +19,7 @@
           {{ data.settings.thresholdMax }}
         }
       </h6>
+      <div class="align-items-center d-flex w-100">
         @if (data.rule.configuration.threshold.unit === '%') {
           <label>{{
             data.rule.configuration.threshold.min | percent: '1.2-2'
@@ -34,6 +28,7 @@
           <label>{{ data.rule.configuration.threshold.min }}</label>
         }
         <mat-slider
+          class="flex-grow-1"
           [max]="data.rule.configuration.threshold.max"
           [min]="data.rule.configuration.threshold.min"
           [step]="data.rule.configuration.threshold.step"
@@ -49,6 +44,7 @@
           <label>{{ data.rule.configuration.threshold.max }}</label>
         }
       </div>
+    </div>
   } @else {
     <div
       class="w-100"
@@ -62,6 +58,7 @@
           {{ data.settings.thresholdMin }}
         }
       </h6>
+      <div class="align-items-center d-flex w-100">
         @if (data.rule.configuration.threshold.unit === '%') {
           <label>{{
             data.rule.configuration.threshold.min | percent: '1.2-2'
@@ -70,6 +67,7 @@
           <label>{{ data.rule.configuration.threshold.min }}</label>
         }
         <mat-slider
+          class="flex-grow-1"
           name="thresholdMin"
           [max]="data.rule.configuration.threshold.max"
           [min]="data.rule.configuration.threshold.min"
@@ -85,6 +83,7 @@
           <label>{{ data.rule.configuration.threshold.max }}</label>
         }
       </div>
+    </div>
     <div
       class="w-100"
       [ngClass]="{ 'd-none': !data.rule.configuration.thresholdMax }"
@@ -97,6 +96,7 @@
           {{ data.settings.thresholdMax }}
         }
       </h6>
+      <div class="align-items-center d-flex w-100">
         @if (data.rule.configuration.threshold.unit === '%') {
           <label>{{
             data.rule.configuration.threshold.min | percent: '1.2-2'
@@ -105,6 +105,7 @@
           <label>{{ data.rule.configuration.threshold.min }}</label>
         }
         <mat-slider
+          class="flex-grow-1"
           name="thresholdMax"
           [max]="data.rule.configuration.threshold.max"
           [min]="data.rule.configuration.threshold.min"
@@ -120,6 +121,7 @@
           <label>{{ data.rule.configuration.threshold.max }}</label>
         }
       </div>
+    </div>
   }
 </div>
 

apps/client/src/app/components/rule/rule-settings-dialog/rule-settings-dialog.scss

@@ -1,2 +1,6 @@
 :host {
 }
+
+label {
+  margin-bottom: 0;
+}