Help gets a Try-it list; dialogs scroll on a phone; the installer's history note in plain words

Every screen was swept in the browser on NA Ingest with Editing on (31 screens, no script
errors); the job dialogs ran taller than a phone screen, so dialogs now scroll.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

settings/apply.py

@@ -537,7 +537,7 @@ def history_entries(data_dir):
         m = re.match(r"config\.json\.bak-(\d{8})-(\d{6})$", name)
         if m:
             t = time.mktime(time.strptime(m.group(1) + m.group(2), "%Y%m%d%H%M%S"))
-            out.append({"id": name, "when": t, "by": "the installer", "note": "config.json replaced by install.sh", "outcome": "", "actions": [], "kind": "install"})
+            out.append({"id": name, "when": t, "by": "the installer", "note": "the settings file was replaced by the installer", "outcome": "", "actions": [], "kind": "install"})
     out.sort(key=lambda e: e["when"] or 0, reverse=True)
     return out
 

settings/ui/app.js

@@ -809,6 +809,17 @@
       <h2>Pages</h2><p><a href="/key-guide.html" target="_blank">What each key does</a> · <a href="/cheat.html" target="_blank">Cheat sheet (one page)</a> · <a href="/where.html" target="_blank">Where things are</a></p>
       <h2>Changing something</h2><ol><li>Switch Editing on (top right): the editing code and your first name.</li><li>Change it where it lives: a key on Keys, a computer on Computers, a fix on Fixes, the rest on Site setup.</li><li>The badge at the top counts your changes; it opens Review & Apply.</li><li>Review reads your changes back in plain words and says what will happen (the deck goes purple for a few seconds; pages re-import only when the layout changed). Press APPLY.</li><li>If the watchdog does not come back, the previous version is put back by itself. History keeps every version; Go back to any of them.</li></ol>
       <h2>First-day walkthrough (10 minutes, no code needed)</h2><ol><li>Overview: the live deck. Green, red, purple.</li><li>Click a red key (or any key): read what it checks and what holding it will do.</li><li>Logs › Watchdog, filter "holds": find a hold and what it did.</li><li>Keys › Restart page: each key restarts one thing, even when green.</li><li>Overview: when alarms are on and when auto-fix may act by itself.</li><li>Computers › Map: which computer a key talks to, and what runs there.</li><li>Help › What each key does: the whole deck in words.</li></ol>
+      <h2>Try it (ten minutes with Editing on; nothing is live until you press APPLY)</h2><ol>
+        <li>Keys › HD2: tick "may have no disk" off and on; the badge counts the change; Review & Apply reads it back. Throw the draft away.</li>
+        <li>Keys: drag LED onto the tray, then back onto its cell. Keys › + New key "HD7", give it a check (Is a recorder OK?), delete it again.</li>
+        <li>Overview › Add or remove a HyperDeck: untick 5 and 6 and look at Keys (the cells stay empty); Review says the page re-imports. Throw it away.</li>
+        <li>Overview › Change the playlist: paste a playlist link, Look it up, see the name follow on Site setup › Spotify and the play fix. Apply if you mean it.</li>
+        <li>Overview › Add a MIDI link to the MIDI key for a peer that exists; Run this fix now on that check (it goes through the watchdog like a hold).</li>
+        <li>Fixes › VISTA: change the program file to Vista2.exe and watch the command rebuild; put it back.</li>
+        <li>Computers › Setup › Lighting PC: open the script, Copy; Computers › Lighting PC › Remove this computer (read what would go), Cancel.</li>
+        <li>Site setup › ATEM › Pick the newest from the folder (it says what differs), Discard. Site setup › Site › Export site bundle.</li>
+        <li>History: open the last version, Go back to this version, look at Review, Throw it away. Undo the last change does the same for the newest.</li>
+        <li>Make a small real change (a note on Computers › Gear), APPLY, watch the steps, then Undo it and APPLY again.</li></ol>
       <h2>The words a key can show</h2>${glossary}
       <h2>Things only a person can do</h2><ul><li>Run the set-up script on a new computer (ARD on a Mac, PowerShell as administrator on a PC), allow Accessibility on the Studio B Mac, click Allow on the Spotify prompt once.</li><li>Create Companion's custom variables and the blink trigger, add pages, install modules, name the Stream Decks.</li><li>Type the Netgear login into the keychain; keep Google Drive signed in for the saved switcher files.</li><li>Save a new switcher file from ATEM Software Control when the show changes, then pick it on Site setup › ATEM.</li></ul>
       <h2>Companion facts (found by trying)</h2><dl class="kv">${(facts.facts || []).map(([q, a]) => `<dt>${esc(q)}</dt><dd>${esc(a)}</dd>`).join("")}</dl>`;

settings/ui/style.css

@@ -65,7 +65,8 @@ pre.log { background: var(--deck); color: #d6dbe4; padding: 10px 12px; border-ra
 .searchresults { position: absolute; left: 190px; right: 16px; top: 46px; z-index: 6; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 50vh; overflow: auto; }
 .searchresults a { display: block; padding: 8px 12px; color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--line); } .searchresults a:hover { background: var(--accent-soft); }
 .dialog { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 9; padding: 16px; }
-.dialog .box { background: var(--surface); border-radius: 12px; padding: 18px; max-width: 460px; width: 100%; }
+.dialog .box { background: var(--surface); border-radius: 12px; padding: 18px; max-width: 520px; width: 100%; max-height: 92vh; overflow: auto; }
+.dialog label.inline { white-space: nowrap; } .dialog table td { padding: 6px 6px; }
 .dialog input { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--fg); font: inherit; margin: 8px 0; }
 .notice { padding: 8px 12px; border-radius: 8px; background: var(--accent-soft); margin: 8px 0; } .notice.grey { background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
 @media (max-width: 760px) {