[IMPORTANT] Fix styling of mitigation intervals

[ivan-aksamentov]

🐛 Bug Report

How to reproduce

Steps to reproduce the issue:

1. Open the application in a browser
2. Observe "Mitigation" section.

😯 Current Behavior

Intervals are not properly aligned. The sizes of input fields should be adjusted for the sizes of their common contents: name is much longer than the strength number. Test on various screen sizes.

🤔 Expected Behavior

Should be pretty :woman_artist: :sparkles:

💁 Possible Solution

🔦 Context

Importance: Intervals is a commonly asked for feature. Should be included into the next release.

💻 Code Sample

🌍 Your Environment

Any

Related

• https://github.com/neherlab/covid19_scenarios/pull/323
• https://github.com/neherlab/covid19_scenarios/issues/14

[kmid5280]

@ivan-aksamentov Are you saying that the inputs should match the width of their contents? I.e. the name input should be longer, whereas the number input should be shorter? Are you also wanting changes to the spacing or positioning of the buttons (do you want them stacked on top of each other)? What about the trash can button placement?

[dkozar]

I think that (on the mobile) we should use the same widths as for existing elements above and below the mitigation intervals:

As you can see, all the controls have full width except buttons. Buttons have text.

I personally like buttons that have both the icon and text:

[dkozar]

As for desktops, first control should probably auto-stretch (flex: 1), green arrow here:

In the above screenshot, I've put all the row padding to 4px, and margin-right for each control (except last) to 4px. I've put width: 70px to numeric stepper (red arrow) to get some more width (not sure how big the numbers are and how many decimals are there). The calendar control's height should be set to be the same as other controls in the row. Button icon is currently not vertically centered.

Of course, let's ask the UX experts to take a look and suggest,