Positioning of Msal login popup

I'm currently using the login popup from msal-angular to login to a Microsoft Office account for an Angular application. However, when the popup appears, it appears in the top left of the screen with half of the window off the screen. Therefore I have to resize it manually to get it to appear fully on screen.

Is there a way to change the positioning of this popup to appear in a certain position? E.g. in the middle of the browser window where it was called from?

My current popup call:

async signIn(): Promise<void> {
    const result = await this.msalService.loginPopup(OAuthSettings.scopes)
      .catch((reason) => {
        console.log('Login failed', JSON.stringify(reason, null, 2));
    });

    if (result) {
      this.authenticated = true;
    }
}

from Positioning of Msal login popup