Is there a way to fix the calender sizing of bootstrap-datetimepicker when using sideBySide?

I've upgraded my project from bootstrap 3 to 4 and noticed the calendar is overlapping past the time picker when I click on the month "August 2021" (clicking on the side arrows works normally). Also noticed the calendar looks rectangular instead of squared, not sure if that's supposed to be normal.

function AddDateTimeControl(parent, control, rowIndex, controlIndex) {
    var dateTimeID = "datetimepicker" + controlIndex;

    var tooltipDiv = CreateTooltipDiv();
    var tooltipSpan = CreateTooltipSpan(control.ToolTip);
    var label = CreateControlLabel(control);
    //var icon = CreateIcon('fa-calendar');
    var icon = CreateIcon("calendar-alt-regular");

    tooltipDiv.appendChild(label);
    tooltipDiv.appendChild(icon);
    tooltipDiv.appendChild(tooltipSpan);

    var dateDiv = document.createElement("div");
    dateDiv.classList.add('input-group');
    dateDiv.classList.add('date');
    dateDiv.classList.add('date-time-control');
    dateDiv.style.color = "black";
    dateDiv.id = dateTimeID;

    var dateTextBox = document.createElement("input");
    dateTextBox.type = "text";
    dateTextBox.classList.add("form-control");
    dateTextBox.classList.add("text-box");
    dateTextBox.classList.add("single-line");
    dateTextBox.value = control.RawValues[0];
    //dateTextBox.readonly = false;

    MarkElementForSerialization(dateTextBox, rowIndex, control.ID, 0);

    var calControlSpan = document.createElement("span");
    calControlSpan.classList.add('input-group-addon');
    //span -> fa-calendar?

    dateDiv.appendChild(dateTextBox);
    dateDiv.appendChild(calControlSpan); //input-group-addon

    parent.appendChild(tooltipDiv);
    parent.appendChild(dateDiv);

    $(dateDiv).datetimepicker();
    $(dateDiv).data("DateTimePicker").sideBySide(true);
    //$(dateDiv).data("DateTimePicker").ignoreReadonly(false);
    $(dateDiv).data("DateTimePicker").stepping(15);
    $(dateDiv).data("DateTimePicker").maxViewMode = 0;
    $(dateDiv).data("DateTimePicker").date(new Date(Date.parse(control.RawValues[0])));
    $(dateDiv).data("DateTimePicker").format("MM/DD/YYYY HH:mm");
    $(dateDiv).data("DateTimePicker").icons({
        time: "fa fa-clock-o",
        date: "fa fa-calendar",
        up: "fa fa-arrow-up",
        down: "fa fa-arrow-down",
        previous: "fa fa-chevron-left",
        next: "fa fa-chevron-right",
        today: "fa fa-clock-o",
        clear: "fa fa-trash-o"
    });

    $(dateTextBox).on('click', function() {
        $(dateDiv).data("DateTimePicker").toggle();
    });
}

Have tried setting the width to 100% but that didn't fix the overlapping issue, thinking I have to target the calendar size specifically to prevent this but not sure how, any ideas?

.bootstrap-datetimepicker-widget.dropdown-menu {
    width: 100% !important;
}

from Is there a way to fix the calender sizing of bootstrap-datetimepicker when using sideBySide?