From 12106846556ac85323ff974a24d6faf17a3a2118 Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Thu, 5 Dec 2024 13:15:28 -0600
Subject: [PATCH] fixed 404 styling

---
 404.html            | 10 +++++++---
 scripts/commerce.js |  4 ++++
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/404.html b/404.html
index 50b497e7a2..ded917dd81 100644
--- a/404.html
+++ b/404.html
@@ -11,7 +11,7 @@
             "@dropins/storefront-auth/": "/scripts/__dropins__/storefront-auth/"
         }
     }
-</script>
+  </script>
   <script type="text/javascript">
     window.isErrorPage = true;
     window.errorCode = '404';
@@ -42,9 +42,13 @@
   <link rel="stylesheet" href="/styles/styles.css">
   <style>
     main.error {
-      min-height: calc(100vh - var(--nav-height));
-      display: flex;
       align-items: center;
+      display: flex;
+      margin: 0 auto;
+      max-width: 1264px;
+      min-height: calc(100vh - var(--nav-height));
+      padding: 0 32px;
+      width: 100%;
     }
 
     main.error .error-number {
diff --git a/scripts/commerce.js b/scripts/commerce.js
index f7fb59f30f..b885271078 100644
--- a/scripts/commerce.js
+++ b/scripts/commerce.js
@@ -212,6 +212,10 @@ export async function loadErrorPage(code = 404) {
   const parser = new DOMParser();
   const doc = parser.parseFromString(htmlText, 'text/html');
   document.body.innerHTML = doc.body.innerHTML;
+  // get dropin styles
+  document.head.querySelectorAll('style[data-dropin]').forEach((style) => {
+    doc.head.appendChild(style);
+  });
   document.head.innerHTML = doc.head.innerHTML;
 
   // https://developers.google.com/search/docs/crawling-indexing/javascript/fix-search-javascript