Ionic Popover positioning in browser with a max-width setting

Ionic Framework
1

In my Ionic 6 app I have a popover component that appears when the user clicks a button in the FAR TOP RIGHT of a form. My app is used in desktop web browsers as well as devices and has a max-width setting of 1000px;

The code to present the popover is:

async presentPopover(ev: any) {
    const popover = await this.popoverController.create({
      component: FeedDetailPopoverComponent,
      componentProps: { item: this.item, feedFilter: this.feedFilter },
      event: ev,
      translucent: true,
    });
    return await popover.present();
  }

When the screen is 1000px or below the popover appears nicely below the button.

But if I increase my screen width beyond the 1000px width, the popover either partially appears because I am just over the 1000px or if I increase the screen width further it does not show at all (as it’s position is now completely outside the boundaries of the app max-width)

Does anyone know what styling I can apply to make the popover always appear within the 1000px width of my app rather than take the actual screen width into account and get lost?

2

In my case, I was limiting the app width on desktop on the ion-app itself which led to similar issues:

ion-app {
  max-width: 960px;
  margin: auto;
}

Setting it on .ion-page instead resolved the issues like popover calculations getting confused:

ion-app {
  div.ion-page {
    max-width: 960px;
    margin: 0 auto;
  }
}