fix: inline toast notification instead of fixed-position (visible in iframe)

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);
 }

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>

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;
 }