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");
+ }
+ }
}
}