diff --git a/helwasm/index.html b/helwasm/index.html
index e868913..d3403cf 100644
--- a/helwasm/index.html
+++ b/helwasm/index.html
@@ -294,6 +294,24 @@
b.title = "In your catalog. Type the master to mark it correct.";
}
}
+ // Shrink the result font just enough to keep it on one line on very narrow screens
+ // (iPhone) instead of wrapping. Falls back to wrapping only if even the floor size
+ // can't fit. Masking doesn't change width (mono disc = mono char), so reveal is safe.
+ function fitResult() {
+ const sec = $("#qsecret");
+ sec.style.fontSize = "";
+ if (!sec.textContent) return;
+ const avail = sec.clientWidth;
+ if (!avail) return;
+ const ws = sec.style.whiteSpace;
+ sec.style.whiteSpace = "nowrap";
+ const full = sec.scrollWidth;
+ sec.style.whiteSpace = ws;
+ if (full > avail) {
+ const base = parseFloat(getComputedStyle(sec).fontSize);
+ sec.style.fontSize = Math.max(11, Math.floor((base * avail) / full)) + "px";
+ }
+ }
function quickGen(silent) {
const spec = $("#qname").value.trim();
const sec = $("#qsecret");
@@ -303,7 +321,7 @@
// (like `*P0 test1 …`) means the name is the next word. Parse it.
const name = spec ? hel_parse_name(spec) : "";
if (!name) {
- sec.textContent = ""; sec.classList.remove("correct");
+ sec.textContent = ""; sec.classList.remove("correct"); sec.style.fontSize = "";
lenEl.textContent = ""; lastSecret = "";
refreshSaveBtn("", false, false);
return;
@@ -334,6 +352,7 @@
sec.textContent = pw;
sec.classList.toggle("correct", correct);
lenEl.textContent = pw ? "len " + pw.length : "";
+ fitResult();
refreshSaveBtn(name, !!pw, correct);
if (!pw && !silent) toast("No output");
}
@@ -470,6 +489,7 @@
};
$("#qname").addEventListener("input", live);
$("#master").addEventListener("input", live);
+ window.addEventListener("resize", fitResult); // re-fit on rotate / width change
$("#qname").addEventListener("keydown", (e) => e.key === "Enter" && quickGen(false));
// On blur, rewrite the name field to the canonical form hel parsed it as
// (name + mode + seq + date + comment), so you see exactly what was used.