[40363] Avatars misplaces in team planner dropdown (#10007)

* set the correct class for user resource in auto completer and styles

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.html

@@ -162,13 +162,16 @@
   </ng-container>
 
   <ng-container *ngSwitchCase="resource ==='user' || resource ==='assignee'">
-    <op-principal
-      *ngIf="item && item.href"
-      [principal]="item"
-      [hideName]="true"
-      size="mini"
-    ></op-principal>
-    <span [ngOptionHighlight]="search">{{ item.name }}</span>
+    <div class="op-autocompleter--option-principal-wrapper">
+      <op-principal
+        *ngIf="item && item.href"
+        [principal]="item"
+        [hideName]="true"
+        class="op-autocompleter--option-principal-avatar"
+        size="mini"
+      ></op-principal>
+      <span [ngOptionHighlight]="search">{{ item.name }}</span>
+    </div>
   </ng-container>
 
   <ng-container *ngSwitchCase="resource ==='subproject' || resource ==='version' || resource ==='status' || resource ==='default'">

frontend/src/app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component.sass

@@ -47,4 +47,11 @@
     display: inline-block
     overflow: hidden
     white-space: nowrap
-    text-overflow: ellipsis
+    text-overflow: ellipsis
+
+  &--option-principal
+    &-wrapper
+      display: flex
+    
+    &-avatar
+      margin-right: 5px