add banner to simluating js events

src/components/Banner/index.astro

@@ -23,7 +23,7 @@ const iconMap: IconMap = {
     .banner-container {
         background: rgb(233, 242, 255);
         border: 1px solid rgb(135, 184, 255);
-        padding: 5px 15px;
+        padding: 5px 13px;
         border-radius: 3px;
         display: flex;
         box-sizing: border-box;
@@ -50,7 +50,7 @@ const iconMap: IconMap = {
     }
 
     .icon {
-        margin-right: 5px;
+        margin-right: 10px;
         padding: 3px 0;
         flex: 0 0 18px;
     }

src/content/blog/2023/04/simulating-js-events.mdx

@@ -7,6 +7,7 @@ socialImage: "simulating-js-events.jpg"
 ---
 
 import SandpackEnv from "../../../../components/Sandpack";
+import Banner from "../../../../components/Banner/index.astro";
 import {
     keyboardEventsDispatchEvents,
     keyboardEventsInputDotValue,
@@ -16,6 +17,12 @@ import {
     mouseEventsEventsClick,
 } from "./_simulating-js-events-code.js";
 
+<Banner type="info">
+    Due to a [problem with Sandpack](https://github.com/codesandbox/sandpack/issues/1091), you will see an error (`"Service Worker registration failed: "`) in the console.
+
+    The examples **will still work**! You may just have to scroll down to see the output.
+</Banner>
+
 I've been working on my _[Google Workspace Zoom Default][webstore]_ Chrome Extension to implement a
 [requested feature][feature-request] where users can use custom zoom values in addition to the predefined zoom values
 that Google provides in their application's zoom dropdown.