Plots not displayed correctly on Firefox

[dandavies99]

Describe the bug
Only the very top of each plot is visible on each data card when viewed using Firefox. The download buttons at the bottom of the card are also not visible. Chrome and Safari seem OK.

To Reproduce
Go to https://liionsden-prod-app.azurewebsites.net/battDB/exps/1/

Expected behavior
Should display the whole plot within the card.

Screenshots

Browser (please complete the following information, if appropraite):

• Browser: Firefox
• Version: 108.0

Aha! Link: https://imperial-college-ict.aha.io/requirements/RSE-132-16

[dandavies99]

Not sure where to start with this one. It seems that Firefox is not aware of the size of the plot, so doesn't leave enough room for it in the card. Manually adding space just after the plot in the template doesn't work because the amount of space to leave will vary depending on the plot.

This could be a Firefox compatibility issue with Bootstrap, Django, Plotly or some combination.

One final consideration is that the way in which plots are rendered (just returning them as a div using plotly.offline) could be modified, but have seen compatibility issues trying to use django_plotly_dash in the past. See #174.