fix toast

static/styles.css

@@ -129,22 +129,35 @@ pre {
   display: block;
 }
 
-.toast-fixed-anchor {
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  z-index: 2000;
-  padding: .75rem;
+/* Toasts: hard-pinned to bottom-right corner */
+#toast-container {
+  position: fixed !important;
+  right: 0 !important;
+  bottom: 0 !important;
+  left: auto !important;
+  top: auto !important;
+
+  margin: 0 !important;
+  padding: 1rem !important;
+
+  width: auto;
+  /* allow toast's own width (e.g., 350px in Bootstrap) */
+  max-width: 100vw;
+  /* safety on tiny screens */
   pointer-events: none;
+  z-index: 3000;
 }
 
-.toast-fixed-anchor .toast-container {
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: end;
-  gap: .5rem;
-}
-
-.toast-fixed-anchor .toast {
+#toast-container .toast {
   pointer-events: auto;
+  margin: 0.25rem 0 0 0;
+  /* stack vertically */
 }
+
+@supports (inset: 0) {
+
+  /* If the browser supports logical inset, keep it exact as well */
+  #toast-container {
+    inset: auto 0 0 auto !important;
+  }
+}