UI improvements to the Webhook Request Detail page

The Webhook Request Detail pages (project and admin-level) need some UI polish! We started this work in !71872 (comment 701909793), but @lvanc noted opportunities for further improvements:

!71872 (comment 701909793)

1. Type hierarchy: The sizes of the different headings seem to be off. For example the <h3> "Request details", is visually smaller than the <h4>s below (I need to take a closer look at this).
2. Empty states: In the Admin-level, after screenshot the "Response" and "Headers" pre areas are empty which makes them look like broken input fields.

Current details (empty pre tags)	Current details

Proposal

• Update heading order to match #343206[Proposal.png]
• Remove the 2 <hr>
• Put the "POST" in an info badge
• IF the response <pre> tags are empty due to an error, can we insert the word "null"?

Design source

✏ Figma project

Availability & Testing

Suggestion: Aside from running package-and-qa on the MR, this issue may be a good opportunity to add a component level spec around webhook request details.

• assert empty state (sections populate with null)
• assert non-empty state (sections populate with the data returned)