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
-      class="w-100"
-      [ngClass]="{
-        'd-none':
-          !data.rule.configuration.thresholdMin ||
-          !data.rule.configuration.thresholdMax
-      }"
-    >
+    <div class="w-100">
       <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,28 +19,31 @@
           {{ data.settings.thresholdMax }}
         }
       </h6>
-      @if (data.rule.configuration.threshold.unit === '%') {
-        <label>{{
-          data.rule.configuration.threshold.min | percent: '1.2-2'
-        }}</label>
-      } @else {
-        <label>{{ data.rule.configuration.threshold.min }}</label>
-      }
-      <mat-slider
-        [max]="data.rule.configuration.threshold.max"
-        [min]="data.rule.configuration.threshold.min"
-        [step]="data.rule.configuration.threshold.step"
-      >
-        <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
-        <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
-      </mat-slider>
-      @if (data.rule.configuration.threshold.unit === '%') {
-        <label>{{
-          data.rule.configuration.threshold.max | percent: '1.2-2'
-        }}</label>
-      } @else {
-        <label>{{ data.rule.configuration.threshold.max }}</label>
-      }
+      <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'
+          }}</label>
+        } @else {
+          <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"
+        >
+          <input matSliderStartThumb [(ngModel)]="data.settings.thresholdMin" />
+          <input matSliderEndThumb [(ngModel)]="data.settings.thresholdMax" />
+        </mat-slider>
+        @if (data.rule.configuration.threshold.unit === '%') {
+          <label>{{
+            data.rule.configuration.threshold.max | percent: '1.2-2'
+          }}</label>
+        } @else {
+          <label>{{ data.rule.configuration.threshold.max }}</label>
+        }
+      </div>
     </div>
   } @else {
     <div
@@ -62,28 +58,31 @@
           {{ data.settings.thresholdMin }}
         }
       </h6>
-      @if (data.rule.configuration.threshold.unit === '%') {
-        <label>{{
-          data.rule.configuration.threshold.min | percent: '1.2-2'
-        }}</label>
-      } @else {
-        <label>{{ data.rule.configuration.threshold.min }}</label>
-      }
-      <mat-slider
-        name="thresholdMin"
-        [max]="data.rule.configuration.threshold.max"
-        [min]="data.rule.configuration.threshold.min"
-        [step]="data.rule.configuration.threshold.step"
-      >
-        <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
-      </mat-slider>
-      @if (data.rule.configuration.threshold.unit === '%') {
-        <label>{{
-          data.rule.configuration.threshold.max | percent: '1.2-2'
-        }}</label>
-      } @else {
-        <label>{{ data.rule.configuration.threshold.max }}</label>
-      }
+      <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'
+          }}</label>
+        } @else {
+          <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"
+          [step]="data.rule.configuration.threshold.step"
+        >
+          <input matSliderThumb [(ngModel)]="data.settings.thresholdMin" />
+        </mat-slider>
+        @if (data.rule.configuration.threshold.unit === '%') {
+          <label>{{
+            data.rule.configuration.threshold.max | percent: '1.2-2'
+          }}</label>
+        } @else {
+          <label>{{ data.rule.configuration.threshold.max }}</label>
+        }
+      </div>
     </div>
     <div
       class="w-100"
@@ -97,28 +96,31 @@
           {{ data.settings.thresholdMax }}
         }
       </h6>
-      @if (data.rule.configuration.threshold.unit === '%') {
-        <label>{{
-          data.rule.configuration.threshold.min | percent: '1.2-2'
-        }}</label>
-      } @else {
-        <label>{{ data.rule.configuration.threshold.min }}</label>
-      }
-      <mat-slider
-        name="thresholdMax"
-        [max]="data.rule.configuration.threshold.max"
-        [min]="data.rule.configuration.threshold.min"
-        [step]="data.rule.configuration.threshold.step"
-      >
-        <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
-      </mat-slider>
-      @if (data.rule.configuration.threshold.unit === '%') {
-        <label>{{
-          data.rule.configuration.threshold.max | percent: '1.2-2'
-        }}</label>
-      } @else {
-        <label>{{ data.rule.configuration.threshold.max }}</label>
-      }
+      <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'
+          }}</label>
+        } @else {
+          <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"
+          [step]="data.rule.configuration.threshold.step"
+        >
+          <input matSliderThumb [(ngModel)]="data.settings.thresholdMax" />
+        </mat-slider>
+        @if (data.rule.configuration.threshold.unit === '%') {
+          <label>{{
+            data.rule.configuration.threshold.max | percent: '1.2-2'
+          }}</label>
+        } @else {
+          <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;
+}