Merge pull request #23 from kalutkaz/ruleNodeStyleImprove

Rule node style improve

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">
-            <tb-relation-type-autocomplete
-              style="width: 200px; min-width: 200px;"
+          <div class="input-block" fxFlex fxLayout="row" 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
+            <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;