From 4ef22084187679f4249c00f839b0b8c941361291 Mon Sep 17 00:00:00 2001
From: cclohmar <claus.lohmar@lohmar.co.uk>
Date: Wed, 29 Jul 2026 10:03:29 +0000
Subject: [PATCH] fix: inline toast notification instead of fixed-position
 (visible in iframe)

---
 web/app.js     |  1 -
 web/index.html |  3 +--
 web/style.css  | 16 +++++-----------
 3 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/web/app.js b/web/app.js
index ef27c76..286cea9 100644
--- a/web/app.js
+++ b/web/app.js
@@ -11,7 +11,6 @@ function showToast(message, type) {
   var toast = document.getElementById('toast');
   toast.textContent = message;
   toast.className = 'toast ' + (type || '');
-  void toast.offsetWidth;
   toast.classList.remove('hidden');
   setTimeout(function () { toast.classList.add('hidden'); }, 3000);
 }
diff --git a/web/index.html b/web/index.html
index 31578d6..0dc640e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -18,6 +18,7 @@
       <button id="reload-btn" class="btn btn-secondary" title="Reload dnsmasq to apply changes">
         Reload dnsmasq
       </button>
+      <span id="toast" class="toast hidden"></span>
     </div>
   </header>
 
@@ -40,8 +41,6 @@
     </table>
   </main>
 
-  <div id="toast" class="toast hidden"></div>
-
   <!-- jQuery and $.cjax() from Zoraxy -->
   <script src="/script/jquery-3.6.0.min.js"></script>
   <script src="/script/utils.js"></script>
diff --git a/web/style.css b/web/style.css
index 5023e15..53abe41 100644
--- a/web/style.css
+++ b/web/style.css
@@ -182,19 +182,14 @@ tr:last-child td {
   gap: 6px;
 }
 
-/* Toast notification */
+/* Toast notification (inline, inside actions bar) */
 .toast {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  padding: 10px 18px;
-  border-radius: 4px;
+  margin-left: 12px;
+  padding: 4px 12px;
+  border-radius: 3px;
   font-size: 13px;
   color: #fff;
-  background: #2d3436;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  transition: opacity 0.25s, transform 0.25s;
-  z-index: 1000;
+  transition: opacity 0.25s;
 }
 
 .toast.success { background: #00b894; }
@@ -202,6 +197,5 @@ tr:last-child td {
 
 .toast.hidden {
   opacity: 0;
-  transform: translateY(10px);
   pointer-events: none;
 }