Fix workspace sizing and placeholder timing

docslib/templates/client.css

@@ -63,7 +63,7 @@ button { color: inherit; }
 .tree-number { flex: 0 0 auto; color: var(--muted); }
 .tree-title { min-width: 0; overflow-wrap: anywhere; }
 
-.workspace { display: flex; min-width: 0; height: 100%; min-height: 0; flex-direction: column; overflow: hidden; }
+.workspace { display: flex; min-width: 0; height: 100%; min-height: 0; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
 .desktop-toolbar { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: 8px; }
 .desktop-search-shell { position: relative; width: min(320px, 30vw); max-width: min(320px, 30vw); flex: 0 1 min(320px, 30vw); transition: max-width .24s ease, opacity .16s ease, transform .24s ease; }
 .search-control { display: flex; width: 100%; height: 44px; align-items: center; border-radius: 24px; background: var(--control); }

docslib/templates/client.js

@@ -39,6 +39,7 @@
   let placeholderText = "";
   let placeholderTarget = "";
   let placeholderIndex = 0;
+  let placeholderDots = 0;
   let placeholderPhase = "typing";
   let lastPlaceholderPage = -1;
 
@@ -330,8 +331,8 @@
     return words.slice(0, Math.max(1, count)).join(" ");
   }
 
-  function applyPlaceholder(value, complete = false) {
+  function applyPlaceholder(value, dots = 0) {
-    const display = value ? `${value}${complete ? "…" : ""}` : "";
+    const display = value ? `${value}${".".repeat(dots)}` : "";
     elements.desktopSearchInput.placeholder = display;
     elements.mobileSearchInput.placeholder = display;
   }
@@ -347,14 +348,22 @@
     if (placeholderPhase === "typing") {
       placeholderIndex += 1;
       placeholderText = placeholderTarget.slice(0, placeholderIndex);
-      const complete = placeholderIndex >= placeholderTarget.length;
+      applyPlaceholder(placeholderText);
-      applyPlaceholder(placeholderText, complete);
       if (placeholderIndex >= placeholderTarget.length) {
+        placeholderPhase = "dots";
+        placeholderTimer = setTimeout(placeholderTick, 180);
+      } else placeholderTimer = setTimeout(placeholderTick, 95 + Math.random() * 90);
+    } else if (placeholderPhase === "dots") {
+      placeholderDots += 1;
+      applyPlaceholder(placeholderText, placeholderDots);
+      if (placeholderDots >= 3) {
         placeholderPhase = "waiting";
-        placeholderTimer = setTimeout(placeholderTick, 10000);
+        placeholderTimer = setTimeout(placeholderTick, 5000);
-      } else placeholderTimer = setTimeout(placeholderTick, 130 + Math.random() * 120);
+      } else placeholderTimer = setTimeout(placeholderTick, 220);
     } else if (placeholderPhase === "waiting") {
       placeholderPhase = "erasing";
+      placeholderDots = 0;
+      applyPlaceholder(placeholderText);
       placeholderTimer = setTimeout(placeholderTick, 180);
     } else {
       placeholderIndex -= 1;
@@ -373,9 +382,10 @@
     placeholderText = "";
     placeholderTarget = choosePlaceholder();
     placeholderIndex = 0;
+    placeholderDots = 0;
     placeholderPhase = "typing";
     if (reducedMotion.matches) {
-      applyPlaceholder(placeholderTarget, true);
+      applyPlaceholder(placeholderTarget, 3);
       return;
     }
     placeholderTimer = setTimeout(placeholderTick, 500);

tests/test_server.py

@@ -74,6 +74,7 @@ def test_all_endpoints_and_self_contained_build(tmp_path):
     assert "100vh" not in html
     assert "html, body { width: 100%; height: 100dvh" in html
     assert "overflow-y: auto" in html
+    assert "flex: 1 1 auto; flex-direction: column" in html
     assert "elements.pageSurface.scrollTo" in html
     assert "font-family: system-ui; font-size: 16px" in html
     assert ".glyph-button, .refresh-glyph { font-family: Arial" in html
@@ -87,7 +88,8 @@ def test_all_endpoints_and_self_contained_build(tmp_path):
     assert 'id="mobile-menu-view"' in html
     assert 'id="mobile-search-view"' in html
     assert "placeholderTick" in html
-    assert "setTimeout(placeholderTick, 10000)" in html
+    assert '".".repeat(dots)' in html
+    assert "setTimeout(placeholderTick, 5000)" in html
     assert '.sidebar-header-buttons .header-link:not(.active):first-child' not in html
     assert "--tree-line: #2c2c2c" in html
     assert "height: 44px" in html