Tweaked error overlay styles (pt2) (#2208)

* Fixed several of the issues and nits from PR:

* Moved margin between header and file name to header, so when content was scrolled, the header would remain more separate
* Made build-time and runtime overlays better match
* Secondary error <pre> style now uses yellow bg instead of red
* 'Scrollable Header' (see above comment to why this is necessary) but I did increase the max-height from 35% to 50%.
* Fixed header and 'X' button vertical alignment

* Temporary stack margin fix

* Move "N errors" to the top

packages/react-dev-utils/webpackHotDevClient.js

@@ -85,7 +85,7 @@ function overlayHeaderStyle() {
     'font-family: sans-serif;' +
     'color: rgb(206, 17, 38);' +
     'white-space: pre-wrap;' +
-    'margin: 0.75rem 2rem 0px 0px;' +
+    'margin: 0 2rem 0.75rem 0px;' +
     'flex: 0 0 auto;' +
     'max-height: 35%;' +
     'overflow: auto;';
@@ -129,9 +129,9 @@ function showErrorOverlay(message) {
     // TODO: unify this with our runtime overlay
     overlayDiv.innerHTML = '<div style="' +
       overlayHeaderStyle() +
-      '">Failed to compile</div><br><br>' +
+      '">Failed to compile</div>' +
       '<pre style="' +
-      'display: block; padding: 0.5em; margin-top: 0.5em; ' +
+      'display: block; padding: 0.5em; margin-top: 0; ' +
       'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
       'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
       '<code style="font-family: Consolas, Menlo, monospace;">' +