From 04811ff56b3ac85a164bf6a0df8796589d2b3751 Mon Sep 17 00:00:00 2001
From: beefchimi <curtdulmage@gmail.com>
Date: Mon, 22 Jul 2024 10:54:34 -0400
Subject: [PATCH] :bug: [Page] Fix Toast centering on Safari

---
 src/layouts/Page.astro | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index 180fc26..5574bd0 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -8,6 +8,8 @@ import '@styles/utility.css';
 import {TOAST_TMPL_ID} from '@data/app';
 import Toast from '@components/Toast.astro';
 
+import ToastTest from '@mock/ToastTest.astro';
+
 interface Props {
   id: string;
   title?: string;
@@ -108,14 +110,19 @@ const OG_IMAGE = '/assets/dulmage-social.png';
     <template id={TOAST_TMPL_ID}>
       <Toast id="ToastPlaceholder" />
     </template>
+
+    <ToastTest />
   </body>
 </html>
 
 <style>
-  /* Horizontal centering is required for Toast components */
+  /*
+    Horizontal centering is required for Toast components.
+    `display grid / justify-items` does not work correctly in Safari.
+  */
   body {
-    display: grid;
-    justify-items: center;
+    display: flex;
+    justify-content: center;
   }
 </style>