`.modal-sm` max-width doesn't match documentation

[Zannick]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

https://getbootstrap.com/docs/5.3/components/modal/#optional-sizes says .modal-sm has a max-width of 300px, along with the other size definitions. The larger sizes only kick in at certain breakpoints, which means to my knowledge that if we're below the breakpoint of one size, we'll use the next smaller size available.

However, the last breakpoint is 576px, below which all sizes fall back to the full screen width minus margin. For .modal-sm this counterintuitively increases its width, which I don't want. (Medium is also increased here, but only by ~70px/14%, vs 270px/90%.)

Per #27094 (comment), this may be intentional, in which case I ask why? And also please disclose this behavior in the documentation.

Reduced test cases

Reproducible in https://getbootstrap.com/docs/5.3/components/modal/#optional-sizes with the small modal button, simply resize the window to 575px.

Possible workaround that I could use :

@media (min-width: 350px) {
.modal-dialog.modal-sm {
    max-width: 300px;
    margin-right: auto;
    margin-left: auto;
}
}

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

5.3.7

[Danielchinasa]

I want to work on this

[mdo]

We wouldn’t use a random value for the media query, but we could ensure that small modals are indeed 300px max at all sizes. That seems like a reasonable change to make. The other, larger sizes could fill the available space until their breakpoints. We can revisit this for sure in v6 and then see about back porting to v5.