refator_comm1

static/styles.css

@@ -145,7 +145,6 @@ footer.site-footer a:hover {
 }
 
 
-/* --- VM Admin: dropdown „target node” ma być zawsze nad wierszem poniżej --- */
 #vm-admin,
 #vm-admin .table-responsive,
 #vm-admin table,
@@ -163,24 +162,37 @@ footer.site-footer a:hover {
 #vm-admin .target-node {
   position: relative;
   z-index: 1001;
-  /* ponad sąsiednimi wierszami */
 }
 
-/* --- Toasty: prawy-dolny róg, stabilnie --- */
+/* Toasts: hard-pinned to bottom-right corner */
 #toast-container {
-  position: fixed;
-  right: max(env(safe-area-inset-right), 1rem);
-  bottom: max(env(safe-area-inset-bottom), 1rem);
-  z-index: 2000;
-  width: min(480px, 96vw);
-  max-width: min(480px, 96vw);
+  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-container .toast {
   pointer-events: auto;
-  max-width: 100%;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-  white-space: normal;
+  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;
+  }
 }

templates/index.html

@@ -279,7 +279,7 @@
   </div>
 
   <!-- Toasts -->
-  <div aria-live="polite" aria-atomic="true" class="position-fixed bottom-0 end-0 p-3" style="z-index: 1080">
+  <div aria-live="polite" aria-atomic="true" class="position-fixed bottom-0 end-0" style="z-index: 1080">
     <div id="toast-container" class="toast-container"></div>
   </div>