Dev tools events layout

[joshmcrty]

Proposed change

This PR cleans up the layout of the Developer Tools > Events page. There currently are a few areas with missing or inconsistent spacing, and at certain screen widths part of the page will be cut off and cause horizontal scrolling if there are events with long lines of text.

Here is the current layout with issues indicated:

Here is the page after this PR. Note that the individual event code elements will now scroll horizontally instead of the entire page.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Go to the Developer Tools > Events page to view the layout. Listen to some events (for example "*"). Resize the screen width until just before it breaks into a mobile/vertical layout to see possible horizontal scrolling before this fix.

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io