Reposition chart tooltip on mobile

[miksa1987]

Hi,

I mentioned I could be working on this in this issue: #71

I think I found a way to position the tooltips so that they're not in the way when on mobile, Recharts offers a position prop on Tooltip component. So I thought to make a reusable ResponsiveTooltip component, which would just render a Tooltip with a specific position according to media queries. Unlike what I thought of before, it would be best to implement to the bottom of the chart, not on top. This is because the height of the tooltips vary, and position is calculated from the top of it.

Let me know what you think of this or if you have some more suggestions!

[ivan-aksamentov]

@miksa1987 Looks like something worth exploring. Feel free to sketch a first draft, and we will see if it flies. Don't have to be perfect in the beginning.

Important is that it does not break desktop experience, as this is our primary target. But again, first draft may have issues. We will fix them eventually.

[miksa1987]

@ivan-aksamentov yes, I opened up a pull request yesterday evening here

I tested it on my computer and desktop experience shouldn't be affected, although More people should see if it works on different machines.

Of course, suggestions for improvements are more than welcome.

[ivan-aksamentov]

@miksa1987 oh, it's a wrong repo. You submitted to https://github.com/ivan-aksamentov/covid19_scenarios but you need to submit to https://github.com/neherlab/covid19_scenarios

Also I haven't updated my repo in a while, that meant you will need to rebase your branch on top of https://github.com/neherlab/covid19_scenarios

[miksa1987]

@ivan-aksamentov whoops. I'm going to fix that in the evening when I get home. Sorry about the inconvenience!

[ivan-aksamentov]

Resolved in #157