fix: stacked loading indicators

frontend/src/app/components/indexing-progress/indexing-progress.component.scss

@@ -1,16 +1,23 @@
-.sticky-loading {
-  position: absolute;
+:host {
+  position: fixed;
   right: 10px;
   z-index: 1000;
   font-size: 14px;
+
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+
   @media (width >= 992px) {
     left: 32px;
     top: 55px;
   }
+
   @media (576px <= width < 992px ) {
     left: 18px;
     top: 55px;
   }
+
   @media (width <= 575px) {
     left: 18px;
     top: 100px;

frontend/src/app/components/indexing-progress/indexing-progress.component.ts

@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 @Component({
   selector: 'app-indexing-progress',
   templateUrl: './indexing-progress.component.html',
+  styleUrl: 'indexing-progress.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })

frontend/src/app/components/loading-indicator/loading-indicator.component.html

@@ -1,3 +1,3 @@
-<div *ngIf="this.indexingProgress$ | async as progress" class="sticky-loading">
+<div *ngIf="this.indexingProgress$ | async as progress">
   <span *ngIf="progress >= 0" class="me-auto badge rounded-pill bg-warning">{{ this.label }} ({{ progress }}%)</span>
 </div>

frontend/src/app/components/loading-indicator/loading-indicator.component.ts

@@ -7,7 +7,6 @@ import { WebsocketService } from '@app/services/websocket.service';
 @Component({
   selector: 'app-loading-indicator',
   templateUrl: './loading-indicator.component.html',
-  styleUrls: ['./loading-indicator.component.scss'],
   standalone: false,
   changeDetection: ChangeDetectionStrategy.OnPush
 })