updated mobile to show title above

frontend/index.html

@@ -191,9 +191,6 @@
             min-width: 80px;
         }
 
-        .browser-safari .tab .tab-icon {
-            display: none;
-        }
 
         .browser-safari .tab:hover {
             background: var(--tab-hover);
@@ -208,9 +205,6 @@
             box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
         }
 
-        .browser-safari .tab-active .tab-icon {
-            display: inline;
-        }
 
         .tab-about .tab-title {
             font-weight: 600;
@@ -303,17 +297,11 @@
             border-radius: 8px;
         }
 
-        .browser-safari .iframe-urlbar .url-title {
-            display: none;
-        }
 
         .iframe-urlbar .tab-icon {
             flex-shrink: 0;
         }
 
-        .url-title-mobile {
-            display: none;
-        }
 
         .iframe-urlbar .url-text {
             font-size: 14px;
@@ -342,26 +330,36 @@
             min-width: 0;
         }
 
-        /* Mobile: title above address bar */
         @media (max-width: 640px) {
-            .iframe-toolbar {
+            .iframe-urlbar .url-title {
-                flex-wrap: wrap;
+                display: none;
             }
-            .iframe-toolbar .url-title-mobile {
+        }
-                width: 100%;
+
+        /* Title bar above address bar — hidden on desktop (title goes in urlbar) */
+        .iframe-titlebar {
+            display: none;
+            padding: 6px 12px 2px;
+            background: var(--tab-bg);
             font-size: 13px;
             color: var(--text);
             overflow: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
-                padding: 0 4px 4px;
-                order: -1;
         }
-            .iframe-urlbar .url-title {
+
-                display: none;
+        @media (max-width: 640px) {
+            .iframe-titlebar {
+                display: block;
+                text-align: center;
             }
         }
 
+        /* Paused marquee row */
+        .tab-row.paused {
+            animation-play-state: paused !important;
+        }
+
         .iframe-close {
             background: none;
             border: none;
@@ -379,7 +377,7 @@
 
         .iframe-viewer iframe {
             width: 100%;
-            height: calc(75vh - 56px);
+            height: calc(75vh - 78px);
             border: none;
             background: white;
         }

frontend/site.js

@@ -17,6 +17,8 @@ const loadingEl = document.getElementById("loading");
 // Detect browser and OS, set classes on body for tab styling
 function detectBrowser() {
     const ua = navigator.userAgent;
+    // Mobile defaults to chrome styling
+    if (/iPhone|iPad|Android/.test(ua)) return "chrome";
     if (ua.includes("Firefox")) return "firefox";
     if (ua.includes("Edg/")) return "edge";
     if (ua.includes("Safari") && !ua.includes("Chrome") && !ua.includes("CriOS")) return "safari";
@@ -155,7 +157,9 @@ function startRowAnimation(row) {
         let pos = stagger * halfWidth;
         let lastTime = null;
 
+        row._rafId = true;
         function tick(now) {
+            if (row._paused) { lastTime = null; requestAnimationFrame(tick); return; }
             if (lastTime === null) { lastTime = now; requestAnimationFrame(tick); return; }
             pos += ((now - lastTime) / 1000) * pxPerSec;
             lastTime = now;
@@ -260,6 +264,7 @@ window.addEventListener("scroll", async () => {
 // Inline iframe viewer
 let activeViewer = null;
 let activeTab = null;
+let activeRow = null;
 
 function openInlineViewer(tabEl, entry, url) {
     // Close existing viewer
@@ -272,10 +277,25 @@ function openInlineViewer(tabEl, entry, url) {
     // Find the row this tab belongs to
     const row = tabEl.closest(".tab-row");
 
+    // Pause the marquee on the selected tab's row
+    row.classList.add("paused");
+    if (row._rafId) {
+        // Firefox rAF: store paused state
+        row._paused = true;
+    } else {
+        // CSS animation: getAnimations() to pause
+        row.getAnimations().forEach(a => a.pause());
+    }
+
     // Build the viewer
     const viewer = document.createElement("div");
     viewer.className = "iframe-viewer";
 
+    // Title bar
+    const titlebar = document.createElement("div");
+    titlebar.className = "iframe-titlebar";
+    titlebar.textContent = entry.title || entry.url;
+
     // Toolbar (address bar area)
     const toolbar = document.createElement("div");
     toolbar.className = "iframe-toolbar";
@@ -306,12 +326,6 @@ function openInlineViewer(tabEl, entry, url) {
 
     toolbar.appendChild(urlbar);
 
-    // Mobile: title shown above the URL bar (hidden on desktop via CSS)
-    const mobileTitle = document.createElement("span");
-    mobileTitle.className = "url-title-mobile";
-    mobileTitle.textContent = entry.title || "";
-    toolbar.appendChild(mobileTitle);
-
     const close = document.createElement("button");
     close.className = "iframe-close";
     close.textContent = "✕";
@@ -322,12 +336,14 @@ function openInlineViewer(tabEl, entry, url) {
     iframe.sandbox = "allow-scripts allow-same-origin allow-forms";
     iframe.src = url;
 
+    viewer.appendChild(titlebar);
     viewer.appendChild(toolbar);
     viewer.appendChild(iframe);
 
     // Insert after the row
     row.after(viewer);
     activeViewer = viewer;
+    activeRow = row;
 
     // Scroll so the viewer is visible
     viewer.scrollIntoView({ behavior: "smooth", block: "start" });
@@ -338,6 +354,15 @@ function closeInlineViewer() {
         activeViewer.remove();
         activeViewer = null;
     }
+    if (activeRow) {
+        activeRow.classList.remove("paused");
+        if (activeRow._paused) {
+            activeRow._paused = false;
+        } else {
+            activeRow.getAnimations().forEach(a => a.play());
+        }
+        activeRow = null;
+    }
     if (activeTab) {
         activeTab.classList.remove("tab-active");
         activeTab = null;