MarginBottom doesn't apply with the Fabbutton when opening a modal in Ionic 6 / Capacitor

I have a another problem after implementing this solution in my android app.

The solutions works when I switch from page to page, but not when I open a modal. I have a component called fabbuton and this is the code.

Fabbutton.html

<div class="fixed">
  <ion-fab (click)="scrollToTop()" vertical="bottom" horizontal="end" edge slot="fixed">
    <ion-fab-button class="toolbar-color" size="small">
      <ion-icon name="arrow-up"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</div>

Fabbutton.css

.fixed {
    position: fixed;
    bottom: 30px;
    right: 0;
}

Fabutton.ts

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-fabbutton',
  templateUrl: './fabbutton.component.html',
  styleUrls: ['./fabbutton.component.scss'],
})
export class FabbuttonComponent {
  
  @Output('onClick') onClick = new EventEmitter<any>();

  scrollToTop() {
   this.onClick.emit();
  }
}

This is my admob service code:

import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { AdMob, BannerAdOptions, BannerAdSize, BannerAdPosition, BannerAdPluginEvents } from '@capacitor-community/admob';

@Injectable({
    providedIn: 'root'
})
export class AdMobService {

    private appMargin: number = 0;

    constructor(private platform: Platform) {
        this.init();
    }

    async init() {

        await this.platform.ready();
        await AdMob.initialize({
            requestTrackingAuthorization: true,
            initializeForTesting: true,
        }).catch(err => console.error('Could not init Admob', err));

        AdMob.addListener(BannerAdPluginEvents.SizeChanged, (info: any) => {
            // Subscribe Change Banner Size
            this.appMargin = parseInt(info.height, 10);
            if (this.appMargin > 0) {
                const app: HTMLElement = document.querySelector('ion-router-outlet');
                app.style.marginBottom = this.appMargin + 'px';
            }
        });
    }

    async bannerAd(admobId: string) {
        const options: BannerAdOptions = {
            adId: admobId,
            adSize: BannerAdSize.FULL_BANNER,
            position: BannerAdPosition.BOTTOM_CENTER,
            margin: 0,
            isTesting: true,
            npa: true
        };

        await AdMob.showBanner(options).catch(err => console.error('Could not init Admob banner', err));
    }
}

So when a add appears the fabbuton goes a little up like this:

enter image description here

When I open a Modal the fabbutton component goes behind the add like this:

enter image description here

In every page it works well, but only in the modal pages it doesn’t add the margin bottom.

I have tried to overrule the CSS with the !important tag but still no luck.

How can I have the marginbottom in the modal like the other pages?