diff --git a/client-src/overlay.js b/client-src/overlay.js
index 9c92e88b67..ca506c8ac8 100644
--- a/client-src/overlay.js
+++ b/client-src/overlay.js
@@ -3,6 +3,15 @@
 
 import ansiHTML from "ansi-html-community";
 import { encode } from "html-entities";
+import {
+  containerStyle,
+  dismissButtonStyle,
+  headerStyle,
+  iframeStyle,
+  msgStyles,
+  msgTextStyle,
+  msgTypeStyle,
+} from "./overlay/styles.js";
 
 const colors = {
   reset: ["transparent", "transparent"],
@@ -28,6 +37,17 @@ let overlayTrustedTypesPolicy;
 
 ansiHTML.setColors(colors);
 
+/**
+ *
+ * @param {HTMLElement} element
+ * @param {CSSStyleDeclaration} style
+ */
+function applyStyle(element, style) {
+  Object.keys(style).forEach((prop) => {
+    element.style[prop] = style[prop];
+  });
+}
+
 /**
  * @param {string | null} trustedTypesPolicyName
  */
@@ -45,15 +65,7 @@ function createContainer(trustedTypesPolicyName) {
   iframeContainerElement = document.createElement("iframe");
   iframeContainerElement.id = "webpack-dev-server-client-overlay";
   iframeContainerElement.src = "about:blank";
-  iframeContainerElement.style.position = "fixed";
-  iframeContainerElement.style.left = 0;
-  iframeContainerElement.style.top = 0;
-  iframeContainerElement.style.right = 0;
-  iframeContainerElement.style.bottom = 0;
-  iframeContainerElement.style.width = "100vw";
-  iframeContainerElement.style.height = "100vh";
-  iframeContainerElement.style.border = "none";
-  iframeContainerElement.style.zIndex = 9999999999;
+  applyStyle(iframeContainerElement, iframeStyle);
   iframeContainerElement.onload = () => {
     containerElement =
       /** @type {Document} */
@@ -61,48 +73,27 @@ function createContainer(trustedTypesPolicyName) {
         /** @type {HTMLIFrameElement} */
         (iframeContainerElement).contentDocument
       ).createElement("div");
+
     containerElement.id = "webpack-dev-server-client-overlay-div";
-    containerElement.style.position = "fixed";
-    containerElement.style.boxSizing = "border-box";
-    containerElement.style.left = 0;
-    containerElement.style.top = 0;
-    containerElement.style.right = 0;
-    containerElement.style.bottom = 0;
-    containerElement.style.width = "100vw";
-    containerElement.style.height = "100vh";
-    containerElement.style.backgroundColor = "rgba(0, 0, 0, 0.85)";
-    containerElement.style.color = "#E8E8E8";
-    containerElement.style.fontFamily = "Menlo, Consolas, monospace";
-    containerElement.style.fontSize = "large";
-    containerElement.style.padding = "2rem";
-    containerElement.style.lineHeight = "1.2";
-    containerElement.style.whiteSpace = "pre-wrap";
-    containerElement.style.overflow = "auto";
-
-    const headerElement = document.createElement("span");
+    applyStyle(containerElement, containerStyle);
+
+    const headerElement = document.createElement("div");
 
     headerElement.innerText = "Compiled with problems:";
+    applyStyle(headerElement, headerStyle);
 
     const closeButtonElement = document.createElement("button");
 
-    closeButtonElement.innerText = "X";
-    closeButtonElement.style.background = "transparent";
-    closeButtonElement.style.border = "none";
-    closeButtonElement.style.fontSize = "20px";
-    closeButtonElement.style.fontWeight = "bold";
-    closeButtonElement.style.color = "white";
-    closeButtonElement.style.cursor = "pointer";
-    closeButtonElement.style.cssFloat = "right";
-    // @ts-ignore
-    closeButtonElement.style.styleFloat = "right";
+    applyStyle(closeButtonElement, dismissButtonStyle);
+
+    closeButtonElement.innerText = "×";
+    closeButtonElement.ariaLabel = "Dismiss";
     closeButtonElement.addEventListener("click", () => {
       hide();
     });
 
     containerElement.appendChild(headerElement);
     containerElement.appendChild(closeButtonElement);
-    containerElement.appendChild(document.createElement("br"));
-    containerElement.appendChild(document.createElement("br"));
 
     /** @type {Document} */
     (
@@ -200,26 +191,29 @@ function show(type, messages, trustedTypesPolicyName) {
   ensureOverlayExists(() => {
     messages.forEach((message) => {
       const entryElement = document.createElement("div");
-      const typeElement = document.createElement("span");
+      const msgStyle = type === "warning" ? msgStyles.warning : msgStyles.error;
+      applyStyle(entryElement, {
+        ...msgStyle,
+        padding: "1rem 1rem 1.5rem 1rem",
+      });
+
+      const typeElement = document.createElement("div");
       const { header, body } = formatProblem(type, message);
 
       typeElement.innerText = header;
-      typeElement.style.color = `#${colors.red}`;
+      applyStyle(typeElement, msgTypeStyle);
 
       // Make it look similar to our terminal.
       const text = ansiHTML(encode(body));
       const messageTextNode = document.createElement("div");
+      applyStyle(messageTextNode, msgTextStyle);
 
       messageTextNode.innerHTML = overlayTrustedTypesPolicy
         ? overlayTrustedTypesPolicy.createHTML(text)
         : text;
 
       entryElement.appendChild(typeElement);
-      entryElement.appendChild(document.createElement("br"));
-      entryElement.appendChild(document.createElement("br"));
       entryElement.appendChild(messageTextNode);
-      entryElement.appendChild(document.createElement("br"));
-      entryElement.appendChild(document.createElement("br"));
 
       /** @type {HTMLDivElement} */
       (containerElement).appendChild(entryElement);
diff --git a/client-src/overlay/styles.js b/client-src/overlay/styles.js
new file mode 100644
index 0000000000..4786c1b62e
--- /dev/null
+++ b/client-src/overlay/styles.js
@@ -0,0 +1,89 @@
+// styles are inspired by `react-error-overlay`
+
+const msgStyles = {
+  error: {
+    backgroundColor: "rgba(206, 17, 38, 0.1)",
+    color: "#fccfcf",
+  },
+  warning: {
+    backgroundColor: "rgba(251, 245, 180, 0.1)",
+    color: "#fbf5b4",
+  },
+};
+
+const iframeStyle = {
+  position: "fixed",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  width: "100vw",
+  height: "100vh",
+  border: "none",
+  "z-index": 9999999999,
+};
+
+const containerStyle = {
+  position: "fixed",
+  boxSizing: "border-box",
+  left: 0,
+  top: 0,
+  right: 0,
+  bottom: 0,
+  width: "100vw",
+  height: "100vh",
+  fontSize: "large",
+  padding: "2rem 2rem 4rem 2rem",
+  lineHeight: "1.2",
+  whiteSpace: "pre-wrap",
+  overflow: "auto",
+  backgroundColor: "rgba(0, 0, 0, 0.9)",
+  color: "white",
+};
+
+const headerStyle = {
+  color: "#e83b46",
+  fontSize: "2em",
+  whiteSpace: "pre-wrap",
+  fontFamily: "sans-serif",
+  margin: "0 2rem 2rem 0",
+  flex: "0 0 auto",
+  maxHeight: "50%",
+  overflow: "auto",
+};
+
+const dismissButtonStyle = {
+  color: "#ffffff",
+  lineHeight: "1rem",
+  fontSize: "1.5rem",
+  padding: "1rem",
+  cursor: "pointer",
+  position: "absolute",
+  right: 0,
+  top: 0,
+  backgroundColor: "transparent",
+  border: "none",
+};
+
+const msgTypeStyle = {
+  color: "#e83b46",
+  fontSize: "1.2em",
+  marginBottom: "1rem",
+  fontFamily: "sans-serif",
+};
+
+const msgTextStyle = {
+  lineHeight: "1.5",
+  fontSize: "1rem",
+  fontFamily: "Menlo, Consolas, monospace",
+};
+
+export {
+  msgStyles,
+  iframeStyle,
+  containerStyle,
+  headerStyle,
+  dismissButtonStyle,
+  msgTypeStyle,
+  msgTextStyle,
+};
diff --git a/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5 b/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5
index 5ab8786e4d..49010921a3 100644
--- a/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/multi-compiler.test.js.snap.webpack5
@@ -51,13 +51,13 @@ Array [
   "[HMR] Cannot apply update. Need to do a full reload!",
   "[HMR] Error: Aborted because ./browser.js is not accepted
 Update propagation: ./browser.js
-    at applyHandler (http://127.0.0.1:8103/browser.js:1034:31)
-    at http://127.0.0.1:8103/browser.js:733:21
+    at applyHandler (http://127.0.0.1:8103/browser.js:1045:31)
+    at http://127.0.0.1:8103/browser.js:744:21
     at Array.map (<anonymous>)
-    at internalApply (http://127.0.0.1:8103/browser.js:732:54)
-    at http://127.0.0.1:8103/browser.js:702:26
-    at waitForBlockingPromises (http://127.0.0.1:8103/browser.js:656:48)
-    at http://127.0.0.1:8103/browser.js:700:24",
+    at internalApply (http://127.0.0.1:8103/browser.js:743:54)
+    at http://127.0.0.1:8103/browser.js:713:26
+    at waitForBlockingPromises (http://127.0.0.1:8103/browser.js:667:48)
+    at http://127.0.0.1:8103/browser.js:711:24",
   "[webpack-dev-server] Server started: Hot Module Replacement enabled, Live Reloading disabled, Progress disabled, Overlay enabled.",
   "[HMR] Waiting for update signal from WDS...",
   "Hello from the browser",
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
index 1931f5342a..e80e804422 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
@@ -42,39 +42,75 @@ exports[`overlay should not show initially, then show on an error and allow to c
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
         ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
         need an appropriate loader to handle this file type, currently no
         loaders are configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
-      <br /><br />
     </div>
   </div>
 </body>
@@ -128,39 +164,75 @@ exports[`overlay should not show initially, then show on an error, then hide on
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
         ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
         need an appropriate loader to handle this file type, currently no
         loaders are configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
-      <br /><br />
     </div>
   </div>
 </body>
@@ -214,39 +286,75 @@ exports[`overlay should not show initially, then show on an error, then show oth
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
         ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
         need an appropriate loader to handle this file type, currently no
         loaders are configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
-      <br /><br />
     </div>
   </div>
 </body>
@@ -263,39 +371,75 @@ exports[`overlay should not show initially, then show on an error, then show oth
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
         ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
         need an appropriate loader to handle this file type, currently no
         loaders are configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;a
       </div>
-      <br /><br />
     </div>
   </div>
 </body>
@@ -370,34 +514,72 @@ exports[`overlay should show a warning after invalidation: overlay html 1`] = `
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -435,39 +617,99 @@ exports[`overlay should show a warning and error for initial compilation and pro
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        &lt;strong&gt;strong&lt;/strong&gt;
+      </div>
     </div>
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
-      <br /><br />
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        &lt;strong&gt;strong&lt;/strong&gt;
+      </div>
     </div>
   </div>
 </body>
@@ -505,54 +747,180 @@ exports[`overlay should show a warning and error for initial compilation: overla
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
   </div>
 </body>
@@ -590,34 +958,72 @@ exports[`overlay should show a warning and hide them after closing connection: o
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -663,34 +1069,72 @@ exports[`overlay should show a warning for initial compilation: overlay html 1`]
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -728,34 +1172,72 @@ exports[`overlay should show a warning when "client.overlay" is "true": overlay
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -793,34 +1275,72 @@ exports[`overlay should show a warning when "client.overlay.errors" is "true": o
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -858,34 +1378,72 @@ exports[`overlay should show a warning when "client.overlay.warnings" is "true":
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -923,33 +1481,70 @@ exports[`overlay should show an ansi formatted error for initial compilation: ov
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
         <span
           style=\\"
             font-weight: normal;
@@ -963,7 +1558,6 @@ exports[`overlay should show an ansi formatted error for initial compilation: ov
           <span style=\\"color: #ffd080\\">ansi formatted text</span></span
         >
       </div>
-      <br /><br />
     </div>
   </div>
 </body>
@@ -1001,34 +1595,72 @@ exports[`overlay should show an error after invalidation: overlay html 1`] = `
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -1066,34 +1698,72 @@ exports[`overlay should show an error for initial compilation: overlay html 1`]
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
   </div>
 </body>
@@ -1131,34 +1801,72 @@ exports[`overlay should show an error when "client.overlay" is "true": overlay h
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
   </div>
 </body>
@@ -1196,34 +1904,72 @@ exports[`overlay should show an error when "client.overlay.errors" is "true": ov
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
   </div>
 </body>
@@ -1261,34 +2007,72 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true":
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
index 7c4fdc318b..f7fcabc944 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
@@ -42,40 +42,75 @@ exports[`overlay should not show initially, then show on an error and allow to c
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR in ./foo.js 1:1</span
-      ><br /><br />
-      <div>
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR in ./foo.js 1:1
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
         Module parse failed: Unterminated template (1:1) You may need an
         appropriate loader to handle this file type, currently no loaders are
         configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
-      <br /><br />
     </div>
   </div>
 </body>
@@ -129,40 +164,75 @@ exports[`overlay should not show initially, then show on an error, then hide on
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR in ./foo.js 1:1</span
-      ><br /><br />
-      <div>
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR in ./foo.js 1:1
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
         Module parse failed: Unterminated template (1:1) You may need an
         appropriate loader to handle this file type, currently no loaders are
         configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
-      <br /><br />
     </div>
   </div>
 </body>
@@ -216,40 +286,75 @@ exports[`overlay should not show initially, then show on an error, then show oth
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR in ./foo.js 1:1</span
-      ><br /><br />
-      <div>
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR in ./foo.js 1:1
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
         Module parse failed: Unterminated template (1:1) You may need an
         appropriate loader to handle this file type, currently no loaders are
         configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
-      <br /><br />
     </div>
   </div>
 </body>
@@ -266,40 +371,75 @@ exports[`overlay should not show initially, then show on an error, then show oth
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR in ./foo.js 1:1</span
-      ><br /><br />
-      <div>
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR in ./foo.js 1:1
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
         Module parse failed: Unterminated template (1:1) You may need an
         appropriate loader to handle this file type, currently no loaders are
         configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;a
       </div>
-      <br /><br />
     </div>
   </div>
 </body>
@@ -382,34 +522,72 @@ exports[`overlay should show a warning after invalidation: overlay html 1`] = `
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -447,39 +625,99 @@ exports[`overlay should show a warning and error for initial compilation and pro
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        &lt;strong&gt;strong&lt;/strong&gt;
+      </div>
     </div>
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>&lt;strong&gt;strong&lt;/strong&gt;</div>
-      <br /><br />
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        &lt;strong&gt;strong&lt;/strong&gt;
+      </div>
     </div>
   </div>
 </body>
@@ -517,54 +755,180 @@ exports[`overlay should show a warning and error for initial compilation: overla
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
   </div>
 </body>
@@ -602,34 +966,72 @@ exports[`overlay should show a warning and hide them after closing connection: o
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -675,34 +1077,72 @@ exports[`overlay should show a warning for initial compilation: overlay html 1`]
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -740,34 +1180,72 @@ exports[`overlay should show a warning when "client.overlay" is "true": overlay
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -805,34 +1283,72 @@ exports[`overlay should show a warning when "client.overlay.errors" is "true": o
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -870,34 +1386,72 @@ exports[`overlay should show a warning when "client.overlay.warnings" is "true":
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -935,33 +1489,70 @@ exports[`overlay should show an ansi formatted error for initial compilation: ov
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
         <span
           style=\\"
             font-weight: normal;
@@ -975,7 +1566,6 @@ exports[`overlay should show an ansi formatted error for initial compilation: ov
           <span style=\\"color: #ffd080\\">ansi formatted text</span></span
         >
       </div>
-      <br /><br />
     </div>
   </div>
 </body>
@@ -1013,34 +1603,72 @@ exports[`overlay should show an error after invalidation: overlay html 1`] = `
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -1078,34 +1706,72 @@ exports[`overlay should show an error for initial compilation: overlay html 1`]
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
   </div>
 </body>
@@ -1143,34 +1809,72 @@ exports[`overlay should show an error when "client.overlay" is "true": overlay h
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
   </div>
 </body>
@@ -1208,34 +1912,72 @@ exports[`overlay should show an error when "client.overlay.errors" is "true": ov
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
   </div>
 </body>
@@ -1273,34 +2015,72 @@ exports[`overlay should show an error when "client.overlay.warnings" is "true":
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
+      \\"
+    >
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(251, 245, 180, 0.1);
+        color: rgb(251, 245, 180);
+        padding: 1rem 1rem 1.5rem;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">WARNING</span><br /><br />
-      <div>Warning from compilation</div>
-      <br /><br />
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        WARNING
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Warning from compilation
+      </div>
     </div>
   </div>
 </body>
@@ -1338,34 +2118,72 @@ exports[`overlay should show overlay when Trusted Types are enabled: overlay htm
       inset: 0px;
       width: 100vw;
       height: 100vh;
-      background-color: rgba(0, 0, 0, 0.85);
-      color: rgb(232, 232, 232);
-      font-family: Menlo, Consolas, monospace;
       font-size: large;
-      padding: 2rem;
+      padding: 2rem 2rem 4rem;
       line-height: 1.2;
       white-space: pre-wrap;
       overflow: auto;
+      background-color: rgba(0, 0, 0, 0.9);
+      color: white;
     \\"
   >
-    <span>Compiled with problems:</span
-    ><button
+    <div
       style=\\"
-        background: transparent;
-        border: none;
-        font-size: 20px;
-        font-weight: bold;
-        color: white;
+        color: rgb(232, 59, 70);
+        font-size: 2em;
+        white-space: pre-wrap;
+        font-family: sans-serif;
+        margin: 0px 2rem 2rem 0px;
+        flex: 0 0 auto;
+        max-height: 50%;
+        overflow: auto;
+      \\"
+    >
+      Compiled with problems:
+    </div>
+    <button
+      aria-label=\\"Dismiss\\"
+      style=\\"
+        color: rgb(255, 255, 255);
+        line-height: 1rem;
+        font-size: 1.5rem;
+        padding: 1rem;
         cursor: pointer;
-        float: right;
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        background-color: transparent;
+        border: none;
       \\"
     >
-      X</button
-    ><br /><br />
-    <div>
-      <span style=\\"color: rgb(227, 96, 73)\\">ERROR</span><br /><br />
-      <div>Error from compilation. Can't find 'test' module.</div>
-      <br /><br />
+      ×
+    </button>
+    <div
+      style=\\"
+        background-color: rgba(206, 17, 38, 0.1);
+        color: rgb(252, 207, 207);
+        padding: 1rem 1rem 1.5rem;
+      \\"
+    >
+      <div
+        style=\\"
+          color: rgb(232, 59, 70);
+          font-size: 1.2em;
+          margin-bottom: 1rem;
+          font-family: sans-serif;
+        \\"
+      >
+        ERROR
+      </div>
+      <div
+        style=\\"
+          line-height: 1.5;
+          font-size: 1rem;
+          font-family: Menlo, Consolas, monospace;
+        \\"
+      >
+        Error from compilation. Can't find 'test' module.
+      </div>
     </div>
   </div>
 </body>