fix: stop z-stacking alert messages

diff --git a/public/assets/css/game.css b/public/assets/css/game.css
index b288eefb7ec4f0be9930fbd52370d63416188417..a7e31c00d3909538c706f2d3417c3849090b386b 100644 (file)
--- a/public/assets/css/game.css
+++ b/public/assets/css/game.css
@@ -159,15 +159,15 @@ dialog .close-modal {
 }
 
 #alerts {
-  position: relative;
+  position: absolute;
+  right: 0;
+  bottom: 0;
 }
 .alert {
   padding: 0.3rem;
   max-width: 17rem;
-  position: absolute;
-  bottom: 1rem;
-  right: 0;
   line-height: 1.2rem;
+  box-shadow: -3px -3px 4px 0px rgba(0, 0, 0, 0.5);
 }
 .alert.success, button.success {
   border: solid 1px #0a0;
@@ -367,6 +367,7 @@ nav.filter-result.active {
 }
 #main-nav {
   margin-bottom: 1rem;
+  position: relative;
 }
 #main-nav section {
   min-height: 344px;

diff --git a/public/index.html b/public/index.html
index 144ad914d8fdb1c5db15bc7225aeee486ea6efca..32e40fd75cea7cbed9b32ea63874e86f06e55a42 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -61,8 +61,8 @@
             <p><button class="btn" id="logout">Logout</button></p>
           </div>
         </section>
+        <div id="alerts"></div>
       </div>
-      <div id="alerts"></div>
 
       <section id="chat">
         <div id="chat-messages" hx-trigger="load delay:1s" hx-get="/chat/history" hx-swap="afterbegin"></div>