feat: move alerts to bottom of main section

diff --git a/public/assets/css/game.css b/public/assets/css/game.css
index 7fb9b921c7a2442c25bf1f38ed5a0bd21b6e2c2f..b288eefb7ec4f0be9930fbd52370d63416188417 100644 (file)
--- a/public/assets/css/game.css
+++ b/public/assets/css/game.css
@@ -158,9 +158,16 @@ dialog .close-modal {
   }
 }
 
+#alerts {
+  position: relative;
+}
 .alert {
   padding: 0.3rem;
-  margin-bottom: 0.3rem;
+  max-width: 17rem;
+  position: absolute;
+  bottom: 1rem;
+  right: 0;
+  line-height: 1.2rem;
 }
 .alert.success, button.success {
   border: solid 1px #0a0;

diff --git a/public/index.html b/public/index.html
index 5e809aa851aa6f3ae1d7d6ab190455d4bbb5ea4f..144ad914d8fdb1c5db15bc7225aeee486ea6efca 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -45,7 +45,6 @@
 
       <div id="signup-prompt" class="hidden"></div>
 
-      <div id="alerts"></div>
       <div id="modal-wrapper"></div>
 
       <div id="main-nav">
@@ -63,6 +62,7 @@
           </div>
         </section>
       </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>