Prevent off-screen popovers by changing the arrow position

Summary

I want to shift horizontally ng-bootstrap popovers that are off-screen.

Stackblitz: https://stackblitz.com/edit/angular-xt18mj

Background

I am using ng-bootstrap (Bootstrap 4 widgets for angular). My app contains a toolbar which contains several buttons. Each button is a popover: click on it and the corresponding content is displayed under the button, as shown below.

Screenshot: https://i.imgur.com/hW8JhMW.png

Issue

However, the left pop-over is off-screen. In raw Bootstrap 4, Popper.js would have noticed it and displayed the popover on the right. This bug has been reported here.

But I don't want this behavior because I want the popover to stay under the toolbar.

What I want is finding a way to shift the popover to the right, keeping the arrow under the button, like this: https://i.imgur.com/u0HqiPS.png

I updated the CSS of the popover (ngb-popover-window) this way:

element.style {
    top: 54px;
    // left: -80px;
    left: 0px !important;
}

This correctly aligns the popover with its parent (which is relative positioned).

Screenshot: https://i.imgur.com/O2WcDrz.png

However:

1. The arrow is not under button 1 (it remains at 50% width)
2. I want to apply this operation only if the popover is off-screen (in the real app, it depends of the toolbar left margin whose width is 2.5%, so not a fixed px value)
3. Popper.js erases dynamically the left: 0px !important; value even if !important is added and sets it back to a computed value.