diff --git a/frontend/index.html b/frontend/index.html
index 529d6dd..65dd8e3 100644
--- a/frontend/index.html
+++ b/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 {
- flex-wrap: wrap;
- }
- .iframe-toolbar .url-title-mobile {
- width: 100%;
- 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;
}
}
+ /* 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;
+ }
+
+ @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;
}
diff --git a/frontend/site.js b/frontend/site.js
index 8a8ef42..9aa1c38 100644
--- a/frontend/site.js
+++ b/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;