[ACS-7286] Fix topbar user info issues

projects/aca-content/src/lib/components/common/user-info/user-info.component.html

@@ -1,11 +1,13 @@
 <div mat-menu-item class="aca-user-info" [routerLink]="['/profile']" title="{{ 'APP.TOOLTIPS.MY_PROFILE' | translate }}">
   <ng-container *ngIf="user$ | async as user">
-    <button class="aca-user-info-button">
-      <div>{{ user.initials || 'U' }}</div>
-    </button>
-    <div class="aca-user-info-details">
-      <div>{{ user.userName }}</div>
-      <div>{{ user.email }}</div>
+    <div class="user-info-content">
+      <button class="aca-user-info-button">
+        <div>{{ user.initials || 'U' }}</div>
+      </button>
+      <div class="aca-user-info-details">
+        <div>{{ user.userName }}</div>
+        <div>{{ user.email }}</div>
+      </div>
     </div>
   </ng-container>
 </div>

projects/aca-content/src/lib/components/common/user-info/user-info.component.scss

@@ -22,4 +22,9 @@
     line-height: 24px;
     margin-left: 10px;
   }
+
+  .user-info-content {
+    display: flex;
+    align-items: center;
+  }
 }

projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.scss

@@ -2,7 +2,7 @@
   border-radius: 90%;
   height: 32px;
   margin-right: 0;
-  min-width: 32px;
+  min-width: 36px;
   padding: 0;
   font-weight: 700;
   line-height: 32px;