Various UI fixes - Githubissues

What does this PR do

Makes various UI tweaks and fixes based on observations using Envy:

Ensure capitalised HTTP verb

Some applications had the HTTP verb (GET, POST, etc) in lowercase, and nothing was ensuring uppercase presentation in the trace details UI, so I've set this to always be uppercase now.

Before	After (fix)

Vertically align field names

When writing custom systems with custom request or response details using the <Field> component, any usage which had a multi-line value would mean that the field label would be centre-aligned, rather than top-aligned.

Before	After (fix)

Tweaks to inline Monaco code editor

When the Monaco code editor was used to display the decoded authorization header value, it had a couple of problems:

It had a fixed height of 200px, regardless of actual content
It didn't match the background of the heading of the component

Before	After (fix)

Collapsed sections made slightly more obvious

When collapsing a section of the trace details, the content would be hidden but it was not abundantly clear that the section was in the collapsed state. I've now made the text have a 50% opacity, which gives a better visual indication that the section is collapsed.

Before	After (fix)

Automatic divider between built-in and custom request or response detail components

Previously, any custom components defined by a system would have no separation from the built-in details in those sections, and authors of those components would need to add in the divider/separation into the UI.

Now, this is done automatically, meaning that custom systems can just supply the component with no divider or padding required.

FormidableLabs / envy

Various UI fixes #199