coreui / coreui-pro / 32660337208

96%

main: 94%

push

github

feat(Modal)!: apply a size modifier at every viewport (#861)

`.modal-lg` and `.modal-xl` set their width inside `lg` and `xl` media queries,
so below those breakpoints the modifier did nothing: a large modal on a 768px
tablet was 500px, the same as one carrying no modifier, and an extra-large modal
on an 1100px screen was 800px. The cap that keeps a modal inside the viewport is
`max-width: calc(100% - margin * 2)` and it was already there, so withholding
the width bought nothing.

Sizes come from `$modal-sizes` and a loop now — the shape `.dialog-*` has always
used. The library stops carrying two ideas of how a window is sized.

Measured on the built stylesheet: at 768px `.modal-lg` goes 500 → 712px, at
1100px `.modal-xl` goes 800 → 1044px, and at 1400px nothing moves.

`.modal-sm` loses its own gate with them, so it is 300px on a phone where it
used to fall back to the default width and fill the screen. That is the one
regression in the change; markup that wants a small screen filled should carry
no size modifier.

The `sm`-up block stays: it raises the margin and the shadow, which has nothing
to do with the width.

4532 of 5097 branches covered (88.92%)

Branch coverage included in aggregate %.

8653 of 9054 relevant lines covered (95.57%)

400.06 hits per line