updated web

web/css/message.css

@@ -1,19 +1,33 @@
-.message {
-    width: 100%;
+* {
+    transition: 0.3s;
+}
+
+.notificationsection {
+    width: max-content;
+    height: 100vh;
+    position: fixed;
+    top: 10px;
+    right: 0;
+    pointer-events: none;
+    z-index: 16;
+}
+
+.notification {
+    width: max-content;
     height: 0;
     overflow: hidden;
     pointer-events: none;
     z-index: 10;
     border-radius: 10px;
-    position: fixed;
     top: 0;
-    left: 0;
-    transition: 0.3s;
+    right: 0;
     cursor: pointer;
     opacity: 0.8;
+    margin: 10px;
+    padding: 0 10px;
 }
 
-.messagetextbox {
+.notificationtextbox {
     width: 100%;
     height: 100%;
     display: grid;
@@ -22,19 +36,19 @@
     pointer-events: none;
 }
 
-.messagetext {
+.notificationtext {
     width: 100%;
     text-align: center;
     pointer-events: none;
 }
 
-.message.active.error {
+.notification.active.error {
     pointer-events: all;
     height: 10%;
     background-color: rgb(233, 70, 70);
 }
 
-.message.active.success {
+.notification.active.success {
     pointer-events: all;
     height: 10%;
     background-color: rgb(76, 209, 76);