Merge pull request #12216 from ArtemDzhereleiko/AD/hot-fix/key-filters-layout

Fixed dynamic sources for filters list

ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html

@@ -40,13 +40,13 @@
     </div>
     <mat-divider style="padding-bottom: 5px;"></mat-divider>
     <div class="predicate-list">
-      <div class="flex flex-row items-stretch justify-start" style="height: 76px;"
+      <div class="flex flex-row items-stretch justify-start h-full min-h-19 max-h-24"
            formArrayName="predicates"
            *ngFor="let predicateControl of predicatesFormArray.controls; let $index = index">
         <div class="filters-operation flex max-w-8% flex-full flex-row items-stretch justify-center">
           <span *ngIf="$index > 0">{{ complexOperationTranslations.get(operation) | translate }}</span>
         </div>
-        <div class="flex max-w-92% flex-full flex-col">
+        <div class="flex max-w-92% min-w-147.5 flex-full flex-col">
           <div class="flex flex-1 flex-row items-center justify-start gap-2">
             <tb-filter-predicate
               class="flex-1"

ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html

@@ -44,7 +44,7 @@
     <div class="tb-hint">{{ hintText | translate }}</div>
   </div>
   <div class="flex flex-col flex-1" [class.!hidden]="!dynamicMode && !onlyUserDynamicSource">
-    <div formGroupName="dynamicValue" class="flex flex-row items-center justify-start gap-2">
+    <div formGroupName="dynamicValue" class="flex flex-row justify-start gap-2">
       <div class="flex max-w-35% flex-full flex-col">
         <mat-form-field hideRequiredMarker class="mat-block">
           <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">

ui-ngx/tailwind.config.js

@@ -103,7 +103,8 @@ module.exports = {
         '25': '6.25rem',
         '37.5': '9.375rem',
         '62.5': '15.625rem',
-        '72.5': '18.125rem'
+        '72.5': '18.125rem',
+        '147.5': '36.875rem'
       },
       maxWidth: {
         '5%': '5%',