diff --git a/frontend/index.html b/frontend/index.html index 65dd8e3..7edf80c 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -265,6 +265,14 @@ border-bottom: 2px solid var(--tab-border); } + .iframe-viewer.iframe-viewer-small { + height: 50vh; + } + + .iframe-viewer-small iframe { + height: calc(50vh - 78px) !important; + } + /* Toolbar area (address bar) */ .iframe-toolbar { display: flex; diff --git a/frontend/site.js b/frontend/site.js index 9aa1c38..4d39cbd 100644 --- a/frontend/site.js +++ b/frontend/site.js @@ -211,8 +211,9 @@ async function loadMore() { } if (entries.length > 0) { - // Inject the "About EveryTab" tab at a random position in the first load - if (container.children.length === 0) { + // Inject the "About EveryTab" tab in the first row on first load + const isFirstLoad = container.children.length === 0; + if (isFirstLoad) { const aboutEntry = { url: "https://everytab.site/about.html", title: "About EveryTab", @@ -220,11 +221,21 @@ async function loadMore() { iframe_ok: true, _isAbout: true, }; - const pos = Math.floor(rng() * Math.min(entries.length, tabsPerRow() * 3)); + const pos = Math.floor(rng() * Math.min(entries.length, tabsPerRow())); entries.splice(pos, 0, aboutEntry); } renderEntries(entries); loadingEl.style.display = "none"; + + // Auto-open the about tab on first load + if (isFirstLoad) { + const aboutTab = container.querySelector(".tab-about"); + if (aboutTab) { + aboutTab.click(); + // Use smaller viewer for initial about page + if (activeViewer) activeViewer.classList.add("iframe-viewer-small"); + } + } } }