fix: toast centering issue

CHANGELOG.md

@@ -17,7 +17,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
-*
+* Toast centering issue
 
 ## [0.3.0] - 2022-06-21
 

examples/web/index.css

@@ -154,7 +154,19 @@ p {
     width: 100%;
 }
 
-.toast {
+.toast-container {
+    background-color: black;
+    height: 0px;
+    left: 0px;
+    pointer-events: none;
+    position: fixed;
+    text-align: center;
+    top: 0px;
+    width: 100%;
+    z-index: 8;
+}
+
+.toast-container > .toast {
     background-color: #2a9d8f;
     border-radius: 4px 4px 4px 4px;
     -o-border-radius: 4px 4px 4px 4px;
@@ -163,8 +175,8 @@ p {
     -khtml-border-radius: 4px 4px 4px 4px;
     -webkit-border-radius: 4px 4px 4px 4px;
     cursor: pointer;
+    display: inline-block;
     font-size: 20px;
-    left: 50%;
     line-height: 22px;
     opacity: 0.0;
     -o-opacity: 0.0;
@@ -173,28 +185,23 @@ p {
     -khtml-opacity: 0.0;
     -webkit-opacity: 0.0;
     padding: 12px 18px 12px 18px;
-    position: fixed;
-    top: -40px;
-    transform: translate(-50%, 0%);
-    -o-transform: translate(-50%, 0%);
-    -ms-transform: translate(-50%, 0%);
-    -moz-transform: translate(-50%, 0%);
-    -khtml-transform: translate(-50%, 0%);
-    -webkit-transform: translate(-50%, 0%);
+    pointer-events: all;
+    position: relative;
+    top: -46px;
     transition: top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
     -o-transition: top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
     -ms-transition: top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
     -moz-transition: top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
     -khtml-transition: top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
     -webkit-transition: top 0.5s cubic-bezier(0.075, 0.82, 0.165, 1), opacity 0.35s cubic-bezier(0.075, 0.82, 0.165, 1);
-    z-index: 8;
+    width: fit-content;
 }
 
-.toast.error {
+.toast-container > .toast.error {
     background-color: #e63946;
 }
 
-.toast.visible {
+.toast-container > .toast.visible {
     opacity: 1.0;
     -o-opacity: 1.0;
     -ms-opacity: 1.0;

examples/web/index.html

@@ -67,8 +67,10 @@
                 </div>
             </div>
         </div>
-        <div id="toast" class="toast">
-            There was an error loading the ROM file
+        <div class="toast-container">
+            <div id="toast" class="toast">
+                There was an error loading the ROM file
+            </div>
         </div>
     </body>
         <div id="modal-container" class="modal-container">