Angular adding `resolve` guard affecting page layout

Question

I'm trying to add a resolve to a component. But when I add resolve, if affects the page layout. The component gets probably absolute position and get out of the parent component grid. Any idea how I can fix this. When I remove resolve, all works well.

following is route configuration

        path: 'wizardStack',
        component: WizardStackComponent,
        outlet: 'wizardOutlet',

        resolve: {
          stack: StackResolveService
        },

        data: {
          slide: false
        }

Following is resolve service

import { Injectable } from '@angular/core';
import { Resolve, Router } from '@angular/router';
import { ActivityService } from 'src/app/activity.service';
import { of, EMPTY, Observable, from } from 'rxjs';
import { take, mergeMap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class StackResolveService implements Resolve<any> {

  constructor(private activityService: ActivityService,
              private router: Router) { }

  resolve(): Observable<any[]> {
    return from(this.activityService.getStack()).pipe(
      take(1),
      mergeMap((crisis) => {
        if (crisis) {
          return of(crisis);
        } else {
          this.router.navigateByUrl('/');
          return EMPTY;
        }
      })
    );
  }
}

Following is component

<div class="contentContainer">
  <div class="content">
    <div class="wizard-step">
      <div class="header">
        <p>Stack works</p>
      </div>
    </div>
  </div>
</div>