Currently, I am facing an issue with two ngx-bootstrap datepickers in my Angular 8 project. When viewed on a mobile device, both datepickers extend beyond the viewport, creating a less than ideal layout. To address this, I need to find a way to center both datepickers on the mobile screen for a better display. The desired outcome can be seen in this image, compared to the current output shown here. While applying left: 23% could potentially solve the issue by adjusting the position of the datepicker elements, it impacts both datepickers and is not the optimal solution. The default styles applied to the datepicker include:
display: block; position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(-42px, 149px, 0px); z-index: 1080;