feat (ui): series overlay - afgerond

app/static/app.js

@@ -52,7 +52,6 @@
     closeTvdbModalBtn: document.getElementById("closeTvdbModalBtn"),
     tvdbModalOpenInTabBtn: document.getElementById("tvdbModalOpenInTabBtn"),
     tvdbModalFrame: document.getElementById("tvdbModalFrame"),
-    tvdbModalStatus: document.getElementById("tvdbModalStatus"),
     tvdbModalFallback: document.getElementById("tvdbModalFallback"),
     settingsBtn: document.getElementById("settingsBtn"),
     settingsModal: document.getElementById("settingsModal"),
@@ -225,7 +224,8 @@
   }
 
   function showTvdbModalFallback(message) {
-    el.tvdbModalStatus.textContent = message;
+    const fallbackText = el.tvdbModalFallback.querySelector("p");
+    if (fallbackText) fallbackText.textContent = message;
     el.tvdbModalFallback.classList.remove("hidden");
   }
 
@@ -235,7 +235,11 @@
     el.tvdbModal.classList.remove("hidden");
     el.tvdbModal.setAttribute("aria-hidden", "false");
     el.tvdbModalFallback.classList.add("hidden");
-    el.tvdbModalStatus.textContent = "Loading TVDB preview...";
+    const fallbackText = el.tvdbModalFallback.querySelector("p");
+    if (fallbackText) {
+      fallbackText.textContent =
+        "This page cannot be embedded here. TheTVDB may block framing using browser security headers.";
+    }
 
     clearTvdbModalTimer();
     state.tvdbModalTimer = window.setTimeout(() => {
@@ -249,7 +253,6 @@
     el.tvdbModal.classList.add("hidden");
     el.tvdbModal.setAttribute("aria-hidden", "true");
     el.tvdbModalFrame.removeAttribute("src");
-    el.tvdbModalStatus.textContent = "";
     el.tvdbModalFallback.classList.add("hidden");
   }
 
@@ -950,8 +953,6 @@
     });
     el.tvdbModalFrame.addEventListener("load", () => {
       clearTvdbModalTimer();
-      el.tvdbModalStatus.textContent =
-        "Iframe load event received. If the page is visible, embedding works in this browser.";
       el.tvdbModalFallback.classList.add("hidden");
     });
     el.settingsBtn.addEventListener("click", openSettingsModal);

app/static/styles.css

@@ -444,7 +444,7 @@ button.secondary {
   min-height: 0;
   border: 1px solid var(--border);
   border-radius: 6px;
-  background: var(--surface-subtle);
+  background: transparent;
 }
 
 .modal-head {

app/templates/index.html

@@ -201,7 +201,6 @@
             <button id="closeTvdbModalBtn" class="secondary" aria-label="Close TVDB preview">✕</button>
           </div>
         </div>
-        <p id="tvdbModalStatus" class="muted"></p>
         <div id="tvdbModalFallback" class="tvdb-fallback hidden">
           <h4>Embedding blocked or unavailable</h4>
           <p>