Expected behavior

When a dropdown button (link) is at the far right of the screen, the text should stay on screen.

Actual behavior

The dropdown text is cutoff, off screen.

Resources (screenshots, code snippets etc.)

This is all the code needed to recreate the bug:

Typescript:

<div class="container">

    <div mdbDropdown class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" aria-expanded="false" mdbDropdownToggle>
            User
        </button>
        <ul mdbDropdownMenu class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
        </ul>
    </div>

</div>

SCSS:

.container {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin-right: 0;
    padding-right: 0;
}

I wrote about this bug 2 months ago here, and I was told that it was fixed in 5.2.0, but this is not the case.