diff --git a/frontend/index.html b/frontend/index.html index a71200a..f399367 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -223,6 +223,10 @@ flex-shrink: 0; } + .url-title-mobile { + display: none; + } + .iframe-urlbar .url-text { font-size: 14px; line-height: 1; @@ -250,6 +254,26 @@ 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; + } + } + .iframe-close { background: none; border: none; diff --git a/frontend/site.js b/frontend/site.js index b1dab7f..7126c13 100644 --- a/frontend/site.js +++ b/frontend/site.js @@ -306,6 +306,12 @@ 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 = "✕";