From c8dad0f61aa00dbcd79539bb1608843c5b100061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Grzegorz=20Ja=C5=9Bkowski?=
 <138671284+g-jaskowski@users.noreply.github.com>
Date: Tue, 20 Aug 2024 20:58:23 +0200
Subject: [PATCH] ACS-8618 fix bulk dropdown icon alignment (#4042)

---
 .../bulk-actions-dropdown.component.html      | 35 +++++++++++--------
 .../bulk-actions-dropdown.component.scss      | 19 +++++-----
 2 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html b/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html
index e39f6ab1b5..40421785c3 100644
--- a/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html
+++ b/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html
@@ -2,6 +2,7 @@
   *ngIf="items?.length"
   [title]="tooltip"
   appearance="outline"
+  subscriptSizing="dynamic"
   class="aca-bulk-actions-form-field"
   data-automation-id="aca-bulk-actions-form-field"
 >
@@ -14,13 +15,16 @@
     (keydown)="onKeyDown($event)"
   >
     <mat-select-trigger>
-      <adf-icon
-        *ngIf="bulkSelectControl.value?.icon"
-        [title]="bulkSelectControl.value?.title | translate"
-        [value]="bulkSelectControl.value?.icon"
-        [attr.data-automation-id]="'aca-bulk-action-icon-' + bulkSelectControl.value?.id"
-      ></adf-icon>
-      {{ bulkSelectControl.value?.title | translate }}
+      <div class="aca-bulk-actions-option-content">
+        <adf-icon
+          *ngIf="bulkSelectControl.value?.icon"
+          [title]="bulkSelectControl.value?.title | translate"
+          [value]="bulkSelectControl.value?.icon"
+          class="aca-bulk-actions-icon"
+          [attr.data-automation-id]="'aca-bulk-action-icon-' + bulkSelectControl.value?.id"
+        ></adf-icon>
+        {{ bulkSelectControl.value?.title | translate }}
+      </div>
     </mat-select-trigger>
 
     <mat-option
@@ -30,13 +34,16 @@
       [attr.data-automation-id]="option.id"
       (click)="runAction(option)"
     >
-      <adf-icon
-        *ngIf="option.icon"
-        [title]="option.title | translate"
-        [value]="option.icon"
-        [attr.data-automation-id]="'aca-bulk-action-icon-' + option.id"
-      ></adf-icon>
-      {{ option.title | translate }}
+      <div class="aca-bulk-actions-option-content">
+        <adf-icon
+          *ngIf="option.icon"
+          [title]="option.title | translate"
+          [value]="option.icon"
+          class="aca-bulk-actions-icon"
+          [attr.data-automation-id]="'aca-bulk-action-icon-' + option.id"
+        ></adf-icon>
+        {{ option.title | translate }}
+      </div>
     </mat-option>
   </mat-select>
 </mat-form-field>
diff --git a/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss b/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss
index 8783d39b97..4f79f8b4dc 100644
--- a/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss
+++ b/projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss
@@ -2,23 +2,24 @@
 
 .aca-bulk-actions-form-field {
   margin-left: 24px;
-  margin-top: 1.4375em;
   width: 295px;
 
   #{$mat-form-field-flex},
-  #{$mat-form-text-field-infix} {
+  #{$mat-select-value} {
     height: 48px;
-    line-height: 48px;
     display: flex;
     align-items: center;
-    border: 0;
   }
+}
 
-  #{$mat-form-field-appearance-outline} #{$mat-form-field-outline} {
-    top: 0;
-  }
+.aca-bulk-actions-option-content {
+  height: 100%;
+  display: flex;
+  column-gap: 8px;
+  align-items: center;
 
-  #{$mat-select} {
-    margin-top: 0.25rem;
+  .aca-bulk-actions-icon {
+    width: 24px;
+    height: 24px;
   }
 }