Hazard cards cut off heading below map at 1280 x 720

[nickvisut]

Describe the bug
Hazard cards overlap heading below map on smaller viewport. More specifically, this happens with a 1280 x 720 (e.g. 720P) screen as pictured. This can also happen with a slightly bigger screen in a web browser that uses vertical tabs.

To Reproduce
Steps to reproduce the behavior:

1. Reduce viewport size to 1280 x 720
2. Load https://safehome.report
3. Note that the heading is cut off as in the first screenshot
4. Repeat for https://develop.safehome.report, where we've tightened up the whitespace and made it more consistent
5. Note that the heading is even more obscured as in the second screenshot

Expected behavior
Heading should not be cut off

Screenshots

Desktop (please complete the following information):

• OS: any
• Browser any
• Version: any

Additional context

• Resolution: 1280 x 720

[nickvisut]

hi @Ramya-Rajasekaran1, please see following screenshot of a "mockup" of temporary fix for this. It simply pushes the heading down via additional margin whitespace so that it's a certain distance from the bottom-most card. Not ideal, but I think it may be good enough as a bandaid while we are transitioning to a new mobile-friendly design. Thoughts?

[nickvisut]

cc @rubyhirsch @jvaneyken