From d132d800c7cf90955eca13fd883db1e8e3b73611 Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Fri, 26 May 2023 10:50:32 +0300
Subject: [PATCH 1/2] UI refactoring

---
 .../relation/relation-filters.component.html  | 25 ++++++++++---------
 .../relation/relation-filters.component.scss  |  6 ++++-
 .../entity/entity-subtype-list.component.html |  5 ++--
 .../entity/entity-type-list.component.html    |  4 +--
 .../entity/entity-type-list.component.ts      |  7 +++++-
 .../relation-type-autocomplete.component.html |  5 ++--
 .../relation-type-autocomplete.component.ts   |  4 ++-
 .../assets/locale/locale.constant-ca_ES.json  |  1 -
 .../assets/locale/locale.constant-cs_CZ.json  |  1 -
 .../assets/locale/locale.constant-da_DK.json  |  1 -
 .../assets/locale/locale.constant-de_DE.json  |  1 -
 .../assets/locale/locale.constant-el_GR.json  |  1 -
 .../assets/locale/locale.constant-es_ES.json  |  1 -
 .../assets/locale/locale.constant-fa_IR.json  |  1 -
 .../assets/locale/locale.constant-fr_FR.json  |  1 -
 .../assets/locale/locale.constant-it_IT.json  |  1 -
 .../assets/locale/locale.constant-ko_KR.json  |  1 -
 .../assets/locale/locale.constant-lv_LV.json  |  1 -
 .../assets/locale/locale.constant-ro_RO.json  |  1 -
 .../assets/locale/locale.constant-ru_RU.json  |  1 -
 .../assets/locale/locale.constant-uk_UA.json  |  2 +-
 .../assets/locale/locale.constant-zh_CN.json  |  1 -
 .../assets/locale/locale.constant-zh_TW.json  |  1 -
 23 files changed, 34 insertions(+), 39 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
index 71965c4ba1..b052a1816c 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html
@@ -22,14 +22,16 @@
            fxLayoutAlign="start center" formArrayName="relationFilters"
            *ngFor="let relationFilterControl of relationFiltersFormArray.controls; let $index = index">
         <div fxFlex fxLayout="row" fxLayoutAlign="start center">
-          <div class="input-block" fxFlex fxLayout="row" fxLayoutAlign="start center" style="margin-right: 8px">
+          <div class="input-block" fxFlex fxLayout="row" fxLayoutGap="28px" fxLayoutAlign="start center" style="margin-right: 8px">
             <tb-relation-type-autocomplete fxFlex="50"
               subscriptSizing="dynamic"
               style="min-width: 200px;"
               [formControl]="relationFilterControl.get('relationType')">
             </tb-relation-type-autocomplete>
-            <tb-entity-type-list style="margin-left: 30px" fxFlex="50"
+            <tb-entity-type-list fxFlex="50"
               subscriptSizing="dynamic"
+              [label]="'entity.entity-types' | translate"
+              floatLabel="always"
               [allowedEntityTypes]="allowedEntityTypes"
               [formControl]="relationFilterControl.get('entityTypes')">
             </tb-entity-type-list>
@@ -49,14 +51,13 @@
         <span fxLayoutAlign="center center"
               class="tb-prompt" translate>relation.any-relation</span>
   </div>
-  <div style="margin: 5px 0px 15px">
-    <button mat-stroked-button color="primary"
-            [disabled]="isLoading$ | async"
-            (click)="addFilter()"
-            type="button"
-            matTooltip="{{ 'relation.add-relation-filter' | translate }}"
-            matTooltipPosition="above">
-      {{ 'relation.add-relation-filter' | translate }}
-    </button>
-  </div>
+  <button mat-stroked-button color="primary"
+          class="add-button"
+          [disabled]="isLoading$ | async"
+          (click)="addFilter()"
+          type="button"
+          matTooltip="{{ 'relation.add-relation-filter' | translate }}"
+          matTooltipPosition="above">
+    {{ 'relation.add-relation-filter' | translate }}
+  </button>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
index 5713fa2461..a2d4232f24 100644
--- a/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
+++ b/ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss
@@ -29,7 +29,7 @@
     }
 
     .body {
-      max-height: 300px;
+      max-height: 363px;
       overflow: auto;
 
       .row {
@@ -48,5 +48,9 @@
     .any-filter{
       margin: 10px 0 20px;
     }
+
+    .add-button {
+      margin: 5px 0px 15px;
+    }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
index 909d780e45..3ad2ef2824 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-subtype-list.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="entitySubtypeListFormGroup" class="mat-block">
-  <mat-label *ngIf="label">{{ label | translate }}</mat-label>
+<mat-form-field [formGroup]="entitySubtypeListFormGroup" [ngClass]="label ? '' : 'tb-chip-list'" class="mat-block">
+  <mat-label *ngIf="label">{{ label }}</mat-label>
   <mat-chip-grid #chipList formControlName="entitySubtypeList">
     <mat-chip-row
       *ngFor="let entitySubtype of entitySubtypeList"
@@ -40,7 +40,6 @@
   </mat-chip-grid>
   <button *ngIf="entitySubtypeListFormGroup.get('entitySubtypeList').value?.length > 1"
           type="button"
-          style="margin-right: 3px"
           matTooltip="{{'entity.clear-selected-profiles' | translate}}"
           matSuffix mat-icon-button
           (click)="clearChipGrid()">
diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html b/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html
index 6852f7f62d..0503ce836b 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html
+++ b/ui-ngx/src/app/shared/components/entity/entity-type-list.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="entityTypeListFormGroup" class="mat-block" floatLabel="always" subscriptSizing="{{ subscriptSizing }}">
-  <mat-label>{{ 'entity.entity-types' | translate }}</mat-label>
+<mat-form-field [formGroup]="entityTypeListFormGroup" class="mat-block" [floatLabel]="floatLabel" subscriptSizing="{{ subscriptSizing }}">
+  <mat-label *ngIf="label"> {{ label }}</mat-label>
   <mat-chip-grid #chipList formControlName="entityTypeList">
     <mat-chip-row
       *ngFor="let entityType of entityTypeList"
diff --git a/ui-ngx/src/app/shared/components/entity/entity-type-list.component.ts b/ui-ngx/src/app/shared/components/entity/entity-type-list.component.ts
index 7cea48e3f1..17f908b2e0 100644
--- a/ui-ngx/src/app/shared/components/entity/entity-type-list.component.ts
+++ b/ui-ngx/src/app/shared/components/entity/entity-type-list.component.ts
@@ -26,7 +26,7 @@ import { EntityService } from '@core/http/entity.service';
 import { MatAutocomplete } from '@angular/material/autocomplete';
 import { MatChipGrid } from '@angular/material/chips';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { SubscriptSizing } from '@angular/material/form-field';
+import { FloatLabelType, SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coercion';
 
 interface EntityTypeInfo {
@@ -56,6 +56,11 @@ export class EntityTypeListComponent implements ControlValueAccessor, OnInit, Af
   get required(): boolean {
     return this.requiredValue;
   }
+
+  @Input() label: string;
+
+  @Input() floatLabel: FloatLabelType = 'auto';
+
   @Input()
   set required(value: boolean) {
     const newVal = coerceBooleanProperty(value);
diff --git a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
index 0d17daf105..c057f1df09 100644
--- a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
+++ b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="relationTypeFormGroup" floatLabel="always" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
-  <mat-label *ngIf="label" required="required">{{ label | translate }}</mat-label>
+<mat-form-field [formGroup]="relationTypeFormGroup" [floatLabel]="floatLabel" class="mat-block" subscriptSizing="{{ subscriptSizing }}">
+  <mat-label *ngIf="label">{{ label }}</mat-label>
   <input matInput type="text"
          #relationTypeInput
          formControlName="relationType"
@@ -26,7 +26,6 @@
          [matAutocomplete]="relationTypeAutocomplete">
   <button *ngIf="relationTypeFormGroup.get('relationType').value && !disabled"
           type="button" color="primary"
-          style="margin-right: 3px;"
           matTooltip="{{ 'relation.clear-relation-type' | translate}}"
           matSuffix mat-icon-button aria-label="Clear"
           (click)="clear()">
diff --git a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.ts b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.ts
index 5f5be4eee6..13bb08d464 100644
--- a/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.ts
+++ b/ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.ts
@@ -24,7 +24,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { BroadcastService } from '@app/core/services/broadcast.service';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { RelationTypes } from '@app/shared/models/relation.models';
-import { SubscriptSizing } from '@angular/material/form-field';
+import { FloatLabelType, SubscriptSizing } from '@angular/material/form-field';
 
 @Component({
   selector: 'tb-relation-type-autocomplete',
@@ -49,6 +49,8 @@ export class RelationTypeAutocompleteComponent implements ControlValueAccessor,
 
   @Input() label: string;
 
+  @Input() floatLabel: FloatLabelType = 'auto';
+
   @Input()
   set required(value: boolean) {
     this.requiredValue = coerceBooleanProperty(value);
diff --git a/ui-ngx/src/assets/locale/locale.constant-ca_ES.json b/ui-ngx/src/assets/locale/locale.constant-ca_ES.json
index dc66a0e9f5..8c07387adc 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ca_ES.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ca_ES.json
@@ -3675,7 +3675,6 @@
         "name-required": "Cal el nom.",
         "name-max-length": "El nom ha de ser inferior a 256",
         "type": "Tipus",
-        "description": "Descripció",
         "delete": "Eliminar node de regles",
         "select-all-objects": "Seleccionar tots els nodes i conexions",
         "deselect-all-objects": "Desfer selecció de tots els nodes i conexions",
diff --git a/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json b/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json
index 41f19bd6f7..229a4d7eee 100644
--- a/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json
+++ b/ui-ngx/src/assets/locale/locale.constant-cs_CZ.json
@@ -2457,7 +2457,6 @@
         "name": "Název",
         "name-required": "Název je povinný.",
         "type": "Typ",
-        "description": "Popis",
         "delete": "Smazat uzel pravidla",
         "select-all-objects": "Vybrat všechny uzly a spojení",
         "deselect-all-objects": "Zrušit výběr všech uzlů a spojení",
diff --git a/ui-ngx/src/assets/locale/locale.constant-da_DK.json b/ui-ngx/src/assets/locale/locale.constant-da_DK.json
index 7662b60a2c..0f1dd146b1 100644
--- a/ui-ngx/src/assets/locale/locale.constant-da_DK.json
+++ b/ui-ngx/src/assets/locale/locale.constant-da_DK.json
@@ -2668,7 +2668,6 @@
     "name": "Navn",
     "name-required": "Navn er påkrævet.",
     "type": "Type",
-    "description": "Beskrivelse",
     "delete": "Slet regelknude",
     "select-all-objects": "Vælg alle knuder og tilslutninger",
     "deselect-all-objects": "Fravælg alle knuder og tilslutninger",
diff --git a/ui-ngx/src/assets/locale/locale.constant-de_DE.json b/ui-ngx/src/assets/locale/locale.constant-de_DE.json
index 3f37abf513..ed73ad25cf 100644
--- a/ui-ngx/src/assets/locale/locale.constant-de_DE.json
+++ b/ui-ngx/src/assets/locale/locale.constant-de_DE.json
@@ -1495,7 +1495,6 @@
     "name": "Name",
     "name-required": "Name ist erforderlich.",
     "type": "Typ",
-    "description": "Beschreibung",
     "delete": "Regelknoten löschen",
     "select-all-objects": "Alle Knoten und Verbindungen auswählen",
     "deselect-all-objects": "Auswahl aller Knoten und Verbindungen aufheben",
diff --git a/ui-ngx/src/assets/locale/locale.constant-el_GR.json b/ui-ngx/src/assets/locale/locale.constant-el_GR.json
index 2bc94ebf42..453b5dd83c 100644
--- a/ui-ngx/src/assets/locale/locale.constant-el_GR.json
+++ b/ui-ngx/src/assets/locale/locale.constant-el_GR.json
@@ -1833,7 +1833,6 @@
     "name": "Όνομα",
     "name-required": "Απαιτείται όνομα.",
     "type": "Τύπος",
-    "description": "Περιγραφή",
     "delete": "Διαγραφή κανόνα κόμβου",
     "select-all-objects": "Επιλογή όλων των κόμβων και συνδέσεων",
     "deselect-all-objects": "Αποεπιλογή όλων των κόμβων και συνδέσεων",
diff --git a/ui-ngx/src/assets/locale/locale.constant-es_ES.json b/ui-ngx/src/assets/locale/locale.constant-es_ES.json
index 8783ab3cb0..967a1d93d4 100644
--- a/ui-ngx/src/assets/locale/locale.constant-es_ES.json
+++ b/ui-ngx/src/assets/locale/locale.constant-es_ES.json
@@ -2856,7 +2856,6 @@
         "name-required": "El nombre es requerido.",
         "name-max-length": "Nombre debe ser menor de 256",
         "type": "Tipo",
-        "description": "Descripción",
         "delete": "Eliminar nodo de reglas",
         "select-all-objects": "Seleccionar todos los nodos y conexiones",
         "deselect-all-objects": "Deshacer selección de todos los nodos y conexiones",
diff --git a/ui-ngx/src/assets/locale/locale.constant-fa_IR.json b/ui-ngx/src/assets/locale/locale.constant-fa_IR.json
index 705fc6824c..6e5026b011 100644
--- a/ui-ngx/src/assets/locale/locale.constant-fa_IR.json
+++ b/ui-ngx/src/assets/locale/locale.constant-fa_IR.json
@@ -1240,7 +1240,6 @@
         "name": "نام",
         "name-required": ".نام مورد نياز است",
         "type": "نوع",
-        "description": "توصيف",
         "delete": "حذف گره قواعد",
         "select-all-objects": "انتخاب تمام گره ها و اتصالات",
         "deselect-all-objects": "لغو انتخاب تمام گره ها و اتصالات",
diff --git a/ui-ngx/src/assets/locale/locale.constant-fr_FR.json b/ui-ngx/src/assets/locale/locale.constant-fr_FR.json
index edaaabdd83..8704210933 100644
--- a/ui-ngx/src/assets/locale/locale.constant-fr_FR.json
+++ b/ui-ngx/src/assets/locale/locale.constant-fr_FR.json
@@ -1918,7 +1918,6 @@
         "delete": "Supprimer le noeud de règle",
         "delete-selected": "Supprimer les éléments sélectionnés",
         "delete-selected-objects": "Supprimer les nœuds et les connexions sélectionnés",
-        "description": "Description",
         "deselect-all": "Désélectionner tout",
         "deselect-all-objects": "Désélectionnez tous les nœuds et toutes les connexions",
         "details": "Détails",
diff --git a/ui-ngx/src/assets/locale/locale.constant-it_IT.json b/ui-ngx/src/assets/locale/locale.constant-it_IT.json
index 6d0eae5ee5..94acd17f82 100644
--- a/ui-ngx/src/assets/locale/locale.constant-it_IT.json
+++ b/ui-ngx/src/assets/locale/locale.constant-it_IT.json
@@ -1278,7 +1278,6 @@
         "name": "Nome",
         "name-required": "Nome obbligatorio.",
         "type": "Tipo",
-        "description": "Descrizione",
         "delete": "Elimina nodo regola",
         "select-all-objects": "Seleziona tutti i nodi e le connessioni",
         "deselect-all-objects": "Deseleziona tutti i nodi e le connessioni",
diff --git a/ui-ngx/src/assets/locale/locale.constant-ko_KR.json b/ui-ngx/src/assets/locale/locale.constant-ko_KR.json
index 28c02a410d..1462a4f3d1 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ko_KR.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ko_KR.json
@@ -1905,7 +1905,6 @@
         "name": "이름",
         "name-required": "이름을 입력하세요.",
         "type": "유형",
-        "description": "설명",
         "delete": "규칙 노드 삭제",
         "select-all-objects": "모든 노드와 연결을 선택",
         "deselect-all-objects": "모든 노드와 연결을 선택 해제",
diff --git a/ui-ngx/src/assets/locale/locale.constant-lv_LV.json b/ui-ngx/src/assets/locale/locale.constant-lv_LV.json
index 645fe007d3..d584f2da96 100644
--- a/ui-ngx/src/assets/locale/locale.constant-lv_LV.json
+++ b/ui-ngx/src/assets/locale/locale.constant-lv_LV.json
@@ -1287,7 +1287,6 @@
         "name": "Nosaukums",
         "name-required": "Nosaukums ir nepieciešams.",
         "type": "Tips",
-        "description": "Apraksts",
         "delete": "Dzēst noteikumu nodi",
         "select-all-objects": "Atlasīt visas nodes un savienojumus",
         "deselect-all-objects": "Noņemt visas nodes un savienojumus",
diff --git a/ui-ngx/src/assets/locale/locale.constant-ro_RO.json b/ui-ngx/src/assets/locale/locale.constant-ro_RO.json
index 1cccfa551b..fa5cee48c9 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ro_RO.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ro_RO.json
@@ -1349,7 +1349,6 @@
         "name": "Denumire",
         "name-required": "Denumirea este obligatorie",
         "type": "Tip",
-        "description": "Descriere",
         "delete": "Şterge Regulă Nod",
         "select-all-objects": "Selectează Toate Nodurile Şi Conexiunile",
         "deselect-all-objects": "Deselectează Toate Nodurile Şi Conexiunile",
diff --git a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json
index 91fa7355b5..a96886fed1 100644
--- a/ui-ngx/src/assets/locale/locale.constant-ru_RU.json
+++ b/ui-ngx/src/assets/locale/locale.constant-ru_RU.json
@@ -1382,7 +1382,6 @@
         "name": "Название",
         "name-required": "Название обязательно.",
         "type": "Тип",
-        "description": "Описание",
         "delete": "Удалить правило",
         "select-all-objects": "Выделить все правила и связи",
         "deselect-all-objects": "Отменить выделение правил и связей",
diff --git a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json
index aa71c84048..7aa541e57f 100644
--- a/ui-ngx/src/assets/locale/locale.constant-uk_UA.json
+++ b/ui-ngx/src/assets/locale/locale.constant-uk_UA.json
@@ -1797,7 +1797,7 @@
         "name": "Ім'я",
         "name-required": "Необхідно вказати ім'я.",
         "type": "Тип",
-        "description": "Опис",
+        "rule-node-description": "Опис вузла правил",
         "delete": "Видалити вузол правил",
         "select-all-objects": "Вибрати усі вузли та з'єднання",
         "deselect-all-objects": "Зняти виділення з усіх вузлів і з'єднань",
diff --git a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
index a37f96875a..58a214372a 100644
--- a/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
+++ b/ui-ngx/src/assets/locale/locale.constant-zh_CN.json
@@ -2943,7 +2943,6 @@
         "name-required": "名称必填。",
         "name-max-length": "名称长度必须少于256个字符",
         "type": "类型",
-        "description": "说明",
         "delete": "删除规则节点",
         "select-all-objects": "选择所有节点和连接",
         "deselect-all-objects": "取消选择所有节点和连接",
diff --git a/ui-ngx/src/assets/locale/locale.constant-zh_TW.json b/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
index 97ac15a4bc..2d493961aa 100644
--- a/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
+++ b/ui-ngx/src/assets/locale/locale.constant-zh_TW.json
@@ -2795,7 +2795,6 @@
         "name-required": "名稱必填。",
         "name-max-length": "名稱應小於256",
         "type": "類型",
-        "description": "描述",
         "delete": "刪除規則節點",
         "select-all-objects": "選擇所有節點和連接",
         "deselect-all-objects": "取消選擇所有節點和連接",

From a7e165165637b739fca90137643b4d4cc1584c38 Mon Sep 17 00:00:00 2001
From: kalytka <ykalytka@thingsboard.io>
Date: Fri, 26 May 2023 11:58:16 +0300
Subject: [PATCH 2/2] Added description marging

---
 .../home/pages/rulechain/rule-node-details.component.html     | 2 +-
 .../home/pages/rulechain/rule-node-details.component.scss     | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
index bea1c50006..b2c73a4bdc 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html
@@ -52,7 +52,7 @@
         [ruleChainType]="ruleChainType"
         [nodeDefinition]="ruleNode.component.configurationDescriptor.nodeDefinition">
       </tb-rule-node-config>
-      <div formGroupName="additionalInfo" fxLayout="column">
+      <div formGroupName="additionalInfo" fxLayout="column" class="description-block">
         <mat-form-field class="mat-block">
           <mat-label translate>rulenode.rule-node-description</mat-label>
           <textarea matInput formControlName="description" rows="1"></textarea>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss
index a576472592..e3cf6699b2 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss
@@ -43,4 +43,8 @@
       }
     }
   }
+
+  .description-block {
+    margin-top: 22px;
+  }
 }