[pizza] fix status icon layout w/ accelerator modal

frontend/src/app/components/tracker/tracker.component.html

@@ -117,7 +117,8 @@
           <div class="spinner-border text-light" style="width: 1em; height: 1em"></div>
         </div>
         <span class="explainer">&nbsp;</span>
-      } @else if (showAccelerationSummary) {
+      } @else {
+        @if (!tx.status?.confirmed && showAccelerationSummary) {
           <ng-container *ngIf="(ETA$ | async) as eta;">
             <app-accelerate-checkout
               *ngIf="(da$ | async) as da;"
@@ -130,10 +131,11 @@
               [eta]="eta"
               [scrollEvent]="scrollIntoAccelPreview"
               (unavailable)="eligibleForAcceleration = false"
-            class="h-100 w-100"
+              class="w-100"
             ></app-accelerate-checkout>
           </ng-container>
-      } @else {
+        }
+        <div class="status-panel d-flex flex-column h-100 w-100 justify-content-center align-items-center" [class.small-status]="!tx.status?.confirmed && showAccelerationSummary">
           @if (tx?.acceleration && !tx.status?.confirmed) {
             <div class="progress-icon">
               <fa-icon [icon]="['fas', 'wand-magic-sparkles']" [fixedWidth]="true"></fa-icon>
@@ -179,6 +181,7 @@
               }
             }
           }
+        </div>
       }
     </div>
 

frontend/src/app/components/tracker/tracker.component.scss

@@ -166,7 +166,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: start;
 
   .explainer {
     margin: 0 1em;
@@ -178,6 +178,15 @@
   font-size: clamp(30px, 20vw, 150px);
 }
 
+.status-panel {
+  &.small-status {
+    min-height: 180px;
+    .progress-icon {
+      font-size: clamp(20px, 13vw, 100px);
+    }
+  }
+}
+
 .footer-link {
   display: flex;
   flex-direction: row;