rule node style improve

ui-ngx/src/app/modules/home/components/details-panel.component.html

@@ -65,6 +65,6 @@
     </section>
   </mat-toolbar>
 </header>
-<div fxFlex class="mat-content" [ngStyle]="{backgroundColor: backgroundColor}">
+<div fxFlex class="mat-content reset-style" [ngStyle]="{backgroundColor: backgroundColor}">
   <ng-content></ng-content>
 </div>

ui-ngx/src/app/modules/home/components/details-panel.component.scss

@@ -20,12 +20,22 @@
   height: 100%;
   display: flex;
   flex-direction: column;
+
   .mat-toolbar.details-toolbar {
     padding: 0;
   }
 }
 
 :host ::ng-deep {
+
+  .reset-style {
+    color: rgba(0, 0, 0, 0.6);;
+    //font-family: "Arial";
+    line-height: 24px;
+    //font-weight: 500;
+    letter-spacing: 0.5px;
+  }
+
   .mat-toolbar-tools {
     height: 100%;
     min-height: 60px;

ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html

@@ -22,13 +22,13 @@
            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">
+          <div class="input-block" fxFlex fxLayout="row" fxLayoutAlign="start center" style="margin-right: 8px">
-            <tb-relation-type-autocomplete
+            <tb-relation-type-autocomplete fxFlex="50"
-              style="width: 200px; min-width: 200px;"
               subscriptSizing="dynamic"
+              style="min-width: 200px;"
               [formControl]="relationFilterControl.get('relationType')">
             </tb-relation-type-autocomplete>
-            <tb-entity-type-list style="margin-left: 30px" fxFlex
+            <tb-entity-type-list style="margin-left: 30px" fxFlex="50"
               subscriptSizing="dynamic"
               [allowedEntityTypes]="allowedEntityTypes"
               [formControl]="relationFilterControl.get('entityTypes')">
@@ -49,7 +49,7 @@
         <span fxLayoutAlign="center center"
               class="tb-prompt" translate>relation.any-relation</span>
   </div>
-  <div style="margin-top: 8px">
+  <div style="margin: 5px 0px 15px">
     <button mat-stroked-button color="primary"
             [disabled]="isLoading$ | async"
             (click)="addFilter()"

ui-ngx/src/app/modules/home/components/relation/relation-filters.component.scss

@@ -16,6 +16,7 @@
 :host {
   .tb-relation-filters {
     max-width: calc(100vw - 48px);
+    margin-top: 2px;
     overflow: hidden;
 
     .container{

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.html

@@ -55,7 +55,7 @@
       <div formGroupName="additionalInfo" fxLayout="column">
         <mat-form-field class="mat-block">
           <mat-label translate>rulenode.rule-node-description</mat-label>
-          <textarea matInput formControlName="description" rows="2"></textarea>
+          <textarea matInput formControlName="description" rows="1"></textarea>
         </mat-form-field>
       </div>
     </section>

ui-ngx/src/app/modules/home/pages/rulechain/rule-node-details.component.scss

@@ -27,12 +27,16 @@
       display: flex;
       flex-direction: column;
       gap: 8px;
-      margin-bottom: 5px;
+
+      @media #{$mat-gt-sm} {
+        margin-bottom: 24px;
+      }
     }
 
     @media #{$mat-gt-sm} {
       flex-direction: row;
       gap: 8px;
+      align-items: center;
 
       .node-setting {
         margin-top: 5px;