auto open about tab at start

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;

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