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 = "✕";