Add cases modal layout broken in IE11

[jessex]

Describe the bug
The add cases modal is broken in IE11. It is flattened and stuck to the bottom right corner of the page, with some of its components, including the crucial save button, stuck below the page. Scrolling is no help because the position appears absolute.

To Reproduce
Steps to reproduce the behavior:

1. Go to the app in IE11
2. Click on a link to open the Add Cases modal
3. See results like in the screenshot below

Expected behavior
The add cases modal should appear centered in the page with all elements visible, regardless of browser.

Screenshots
Any data in this screenshot is fake:

Desktop (please complete the following information):

• OS [e.g. Windows 10]: Windows
• Browser [e.g. chrome, edge]: Internet Explorer
• Version [e.g. 22]: 11

Additional context
There are other difficulties in testing in IE11, such as its inability to handle many facilities on the same page without gridlocking.

[jessex]

@sychang triage how you see fit.

[jessex]

@szhu, I wonder if this is something you might be willing and able to look into? @glen0071 was having trouble getting IE's dev tools to be helpful for him in figuring this one out.

[glen0071]

I'm a little sad to give this up. No one wants to be defeated by IE.

For future efforts, I'd recommend focusing on src/design-system/ModalDialog.tsx. Specifically, the styling for the BackgroundAside and ModalContainer components.

One bug is that the current state of the code, background-color: rgb(214, 215, 215, 0.8); is simply missing the a in rgba, inserting a will correct the background color on the BackgroundAside component.

The bigger issue is that css rules like align-items, align-self, and justify-content are buggy in IE. https://caniuse.com/ and Stackoverflow gave some small hints - but most of the fixes are directed at IE10 and below. My main obstacle was when I ran IE11 on my Macbook virtual machines and an old PC I have at home, the developer tools didn't function well. When I tried to edit those CSS rules in the browser, hoping dynamic rendering would help me identify a fix, it would freeze, or take so long I couldn't tell if it had any affect.

[szhu]

Thanks for the context. @glen0071 can you tell me how to activate this modal? I can't find it currently.

[jessex]

@glen0071: Would you mind issuing a one-liner PR to add the missing a in rgba?

@szhu: This seems to apply to all modals. For example, you can use the "Add Cases" modal which can be reached from the facility row of the scenario details page by clicking on the cases number or from the facility details page by clicking the "Add historical cases" button.