Evaluate modal sizes

[RFSH]

In the AngularJS version, we're customizing the position and width of modals ourselves. We've done this by targeting the modals based on their sizes.

The latest bootstrap version has removed the notion of the md modal. So there won't be any modal-md class anymore. One solution would be adding the current modal-md styles to all the modals. But, given that the size is an optional property, some of the modals we're showing in AngularJS use the default modal size without specifying the size property. So we cannot simply change the default modal sizes and must evaluate each case.

[RFSH]

The latest changes to implement record React app has affected the modal sizes and that's why I reopened this issue.

We've noticed this since the facet popup width is not based on the percentage of viewport and instead it's a fixed width (which is not desirable).

[jrchudy]

This came up in a conversation with Hongsuda again about ~1 month ago. We were discussing the content of the "duplicate saved query" modal that informs the user that the query they are trying to save has already been saved.

We talked about making modals more responsive to the screen they are being shown on. We have 2 types of modals, modals with fixed content and modals with dynamic content.

For modals with fixed content:

• large screens (4k monitors and/or zoom level smaller than 50% or 60%) stretch this content out into a very long line that becomes less readable
• we should decide on a fixed "width" based on the modal content, instead of blindly using size='sm' which sets the width relative to the viewport width

For modals with dynamic content:

• large screens sometimes make these modals look "small"
  • if more content can be shown by stretching the modal, we might want to
• large screens can make the content look "spread out" too
  • when only 4 or 5 columns are shown with limited data, there is a lot of whitespace