Fix position of IAN loading image on mobile

https://community.openproject.org/wp/46148

frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.html

@@ -1,5 +1,8 @@
 <div class="op-ian-center">
-  <div class="op-ian-center--content">
+  <div
+    class="op-ian-center--content"
+    [class.op-ian-center--content_empty]="(loading$ | async) === true || (hasNotifications$ | async) === false"
+  >
     <ng-container *ngIf="(loading$ | async) === false; else loading">
       <ng-container *ngIf="(hasNotifications$ | async); else noResults">
         <cdk-virtual-scroll-viewport
@@ -42,9 +45,11 @@
       </ng-template>
     </ng-container>
     <ng-template #loading>
-      <img [src]="image.loading" 
-          class="op-ian-center--loading-indicator op-ian-center-loading-image"
+      <div class="op-ian-center--loading-indicator">
+        <img [src]="image.loading"
+          class="op-ian-center-loading-image"
           data-qa-selector="op-ian-center--loading-indicator"/>
+      </div>
     </ng-template>
   </div>
   <div class="op-ian-center--footer">

frontend/src/app/features/in-app-notifications/center/in-app-notification-center.component.sass

@@ -8,6 +8,10 @@
   &--content
     height: 100%
 
+    &_empty
+      display: flex
+      align-items: center
+
   &--viewport
     height: 100%
     // Avoid infinite horizontal scrolling on mobile iOS (#39849)
@@ -21,17 +25,13 @@
 
   // While loading, appear to be showing one item row
   &--loading-indicator
-    position: absolute
-    left: 50%
-    top: 50%
-    transform: translate(-50%, -50%)
+    display: flex
+    flex-direction: column
+    align-items: center
     text-align: center
-    max-width: 650px
+    max-width: 677px
+    margin: 0 auto
 
-    @media screen and (max-width: 679px)
-      left: 0
-      top: 2rem
-      transform: none
 
   :host
     .-browser-safari &