[ACS-7330] edit rules dialog fixes (#3723)

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss

@@ -49,7 +49,7 @@
         z-index: 1;
         display: flex;
         flex-direction: row;
-        align-items: flex-start;
+        align-items: center;
         overflow-x: auto;
         justify-content: space-between;
         padding: 12px 20px;

projects/aca-content/folder-rules/src/rule-details/actions/rule-action-list.ui-component.html

@@ -27,7 +27,7 @@
   </mat-menu>
 </div>
 
-<button mat-button data-automation-id="rule-action-list-add-action-button" (click)="addAction()" *ngIf="!readOnly">
+<button mat-flat-button data-automation-id="rule-action-list-add-action-button" (click)="addAction()" *ngIf="!readOnly">
   <mat-icon>add</mat-icon>
   <span>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ACTION_BUTTONS.ADD_ACTION' | translate }}</span>
 </button>

projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss

@@ -4,13 +4,22 @@
     flex-direction: row;
     gap: 20px;
 
-    adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
+    adf-card-view {
-      display: inline-block;
+      margin-top: -15px;
-      width: 300px;
+
+      .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
+        display: inline-block;
+        width: 300px;
+
+        .adf-textitem-clickable {
+          padding-top: 0;
+        }
+      }
     }
   }
 
   &-full-width {
+    height: fit-content;
     flex: 1;
   }
 }

projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html

@@ -56,11 +56,11 @@
   </div>
 
   <div class="aca-rule-composite-condition__form__actions" *ngIf="!readOnly" data-automation-id="add-actions">
-    <button mat-button (click)="addSimpleCondition()" data-automation-id="add-condition-button">
+    <button mat-flat-button (click)="addSimpleCondition()" data-automation-id="add-condition-button">
       <mat-icon>add</mat-icon>
       <span>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.CONDITION_BUTTONS.ADD_CONDITION' | translate }}</span>
     </button>
-    <button mat-button (click)="addCompositeCondition()" data-automation-id="add-group-button">
+    <button mat-flat-button (click)="addCompositeCondition()" data-automation-id="add-group-button">
       <mat-icon>add</mat-icon>
       <span>{{ 'ACA_FOLDER_RULES.RULE_DETAILS.CONDITION_BUTTONS.ADD_GROUP' | translate }}</span>
     </button>

projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss

@@ -26,7 +26,8 @@
       gap: 8px;
 
       & > :nth-child(1) {
-        width: 5em;
+        width: 7em;
+        height: fit-content;
         font-size: inherit;
       }
 

projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.scss

@@ -3,12 +3,9 @@
 }
 
 .aca-edit-rule-dialog {
-  margin: -24px;
-
   &__header {
     display: flex;
     align-items: center;
-    margin: -43px -24px 0;
     padding: var(--edit-rule-dialog-padding);
     box-sizing: border-box;
     border-bottom: 1px solid var(--theme-border-color);
@@ -26,20 +23,18 @@
     }
   }
 
-  &__content {
+  .aca-edit-rule-dialog__content {
-    margin: 0 -24px;
+    color: inherit;
     padding: 0;
 
     &__spinner {
       display: flex;
       align-items: center;
       justify-content: center;
-      margin: 20px 0;
     }
   }
 
   &__footer {
-    margin: 0 -24px -43px;
     padding: var(--edit-rule-dialog-padding);
     box-sizing: border-box;
     border-top: 1px solid var(--theme-border-color);

projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html

@@ -1,7 +1,7 @@
 <form class="aca-rule-details__form" [ngClass]="{ 'aca-read-only': readOnly }" [formGroup]="form">
 
   <ng-container *ngIf="!preview">
-    <div class="aca-rule-details__form__row aca-rule-details__form__name">
+    <div class="aca-rule-details__form__row">
       <label for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
       <div>
         <mat-form-field floatLabel='auto' class="aca-rule-details__form__row__field">

projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss

@@ -6,11 +6,6 @@
       padding: 8px 20px;
       width: 100%;
       box-sizing: border-box;
-      overflow-x: auto;
-
-      &.aca-rule-details__form__name {
-        padding-bottom: 0;
-      }
 
       &.aca-rule-details__form__description {
         padding-top: 0;
@@ -40,7 +35,6 @@
       &__field {
         width: 100%;
         max-width: 400px;
-        margin-top: -11px;
         font-size: inherit;
 
         &__textarea {