Say plainly when a save did not save

Two problems on the settings footer, both of which let a refused save look
like nothing had happened.

A long message pushed Reset tiles onto a line of its own and slid Reset to
defaults across, so the buttons jumped whenever the drawer had something to
say. The message now takes the space the buttons leave and wraps inside it,
which also keeps them pinned right when there is no message at all.

The Save button now turns red when a click did not save, and stays that way
until one does. Every refusal already explained itself beside the button,
but the drawer stayed open looking untouched, which reads as a click that
missed. Discarding and reopening starts clean, and the colour comes from
each theme's own palette rather than a fixed red.

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

Author: cansofgrease

internal/web/ui/index.html

@@ -790,6 +790,10 @@
   @media (max-width:600px){ .info::after{width:min(250px,86vw);left:auto;right:0;} .lbl .info::after,.ie-lbl .info::after,.netinfo .info:not(.conn-off)::after{position:fixed;left:8px !important;right:auto !important;top:auto;bottom:12px;width:min(250px,86vw);} }
   .drawer-actions{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;
     border-top:1px solid var(--line);padding-top:16px;margin-top:4px;}
+  /* The message takes whatever space the buttons leave and wraps inside it, which
+     also keeps the buttons pinned right when it is empty. Sized to its own text it
+     overflowed the row instead, pushing Reset tiles onto a line of its own. */
+  #settingsMsg{flex:1 1 0;min-width:0;}
 
   /* Content brightness: a black overlay above everything dims the whole page
      uniformly. opacity = 1 - brightness; pointer-events:none keeps the UI usable. */
@@ -1150,6 +1154,10 @@
     padding:7px 14px;font:inherit;font-weight:600;font-size:12px;cursor:pointer;
     transition:filter .15s,transform .08s;}
   .btn:hover{filter:brightness(1.09);} .btn:active{transform:translateY(1px);} .btn:disabled{opacity:.55;cursor:default;}
+  /* Save goes red when a click did NOT save. The message beside it says why, but
+     the drawer stays open looking exactly as it did, which otherwise reads as
+     nothing having happened at all. It stays red until a save actually lands. */
+  .btn.err{background:var(--down);}
   /* Busy state for ordinary buttons, same swap the RUN pill uses: the label goes
      visibility:hidden rather than display:none so the button keeps its own width
      and nothing on the row shifts while the work runs. Opacity stays up - a busy
@@ -2247,7 +2255,7 @@ <h3>Notifications</h3>
         <button class="btn" id="saveSettings">Save</button>
         <button class="btn ghost" id="discardSettings" type="button">Discard</button>
         <span class="muted" id="settingsMsg"></span>
-        <button class="btn ghost" id="resetSettings" type="button" style="margin-left:auto">Reset to defaults</button>
+        <button class="btn ghost" id="resetSettings" type="button">Reset to defaults</button>
         <button class="btn ghost" id="resetLayout" type="button">Reset tiles</button>
       </div>
     </div>
@@ -3442,6 +3450,7 @@ <h2><span class="drag-handle" title="Drag to reorder" aria-hidden="true"><svg vi
 }
 function openDrawer(){
   dismissCoach(); // opening Settings marks the first-run coachmark seen
+  $('saveSettings').classList.remove('err'); // a discarded failure must not colour a fresh open
   // Baseline the live theme preview + unsaved-changes snapshot on every real
   // open (gear or error-bubble link) - but not if the drawer is already open,
   // so a re-entrant open can't erase in-progress edits from the dirty check.
@@ -7790,11 +7799,17 @@ <h2><span class="drag-handle" title="Drag to reorder" aria-hidden="true"><svg vi
   return b;
 }
 let saveInFlight=false;
+// Marks the Save button as "this did not save". Text is optional: postAccess
+// has already put its own error on screen, and only the button is missing.
+function saveFailed(text){
+  if(text !== undefined) $('settingsMsg').textContent = text;
+  $('saveSettings').classList.add('err');
+}
       $('saveSettings').addEventListener('click', async () => {
   // Ignore re-entrant clicks while a save is running: the access POST clears the password
   // field mid-flight, so a second overlapping save could submit a blank password.
   if(saveInFlight) return;
-  saveInFlight=true; $('saveSettings').disabled=true;
+  saveInFlight=true; $('saveSettings').disabled=true; $('saveSettings').classList.remove('err');
   try {
   // If the city/ID box still has text, search it first so settingsBody() captures
   // the resulting scope - covers "typed but never clicked Search" and "changed the
@@ -7804,14 +7819,14 @@ <h2><span class="drag-handle" title="Drag to reorder" aria-hidden="true"><svg vi
   // Don't save the old scope under a failed search - but an emptied box means the
   // user gave up on that query (Auto location's programmatic clear included), so it
   // no longer blocks. The failed text is kept in the box, so "fix" is followable.
-  if(serverSearchFailed && $('serverCity').value.trim()){ $('settingsMsg').textContent='Could not find that server/city - fix the search or clear the box before saving.'; return; }
+  if(serverSearchFailed && $('serverCity').value.trim()){ saveFailed('Could not find that server/city - fix the search or clear the box before saving.'); return; }
   // Same rule for a bad iperf3 address: block rather than save around it, otherwise the
   // save reports success while that field silently kept its old value.
   const addrErr=iperfAddrError();
   if(addrErr){
     iperfAddrBad(addrErr);
     activateTab('server'); $('setIperfAddr').focus();
-    $('settingsMsg').textContent='Fix the iperf3 server address before saving.';
+    saveFailed('Fix the iperf3 server address before saving.');
     return;
   }
   // A renamed server whose stored password was never re-entered: the save would
@@ -7826,27 +7841,27 @@ <h2><span class="drag-handle" title="Drag to reorder" aria-hidden="true"><svg vi
   { const orphan=iperfPwOrphan();
     if(orphan){
       activateTab('server');
-      $('settingsMsg').textContent='Re-enter '+(orphan.label||orphan.orig_addr)+"'s password (its address changed), or change the address back, before saving.";
+      saveFailed('Re-enter '+(orphan.label||orphan.orig_addr)+"'s password (its address changed), or change the address back, before saving.");
       return;
     } }
   const body = settingsBody();   // captures the open iperf3 editor (incl. a just-typed address) too
   // iperf3 with no valid server set would fail every run ("no iperf3 server set") - block
   // the save and point the user at the fix rather than persist a broken engine.
   if(body.speed_engine==='iperf3' && !body.iperf_server){
-    $('settingsMsg').textContent='The iperf3 engine needs a server - add one with a host:port and pick it as the test target before saving.';
+    saveFailed('The iperf3 engine needs a server - add one with a host:port and pick it as the test target before saving.');
     return;
   }
   // An enabled schedule whose windows have no active days never runs - block it
   // rather than silently disabling probing/speedtests behind an "on" toggle.
   for(const f of ['lat','speed']){ if($(SCHED_FEATS[f].en).checked && body['sched_'+f+'_windows'].every(w=>!w.days.includes('1'))){
-    $('settingsMsg').textContent='The '+(f==='lat'?'latency':'speedtest')+' schedule has no active days - pick a day or turn it off.'; return; } }
+    saveFailed('The '+(f==='lat'?'latency':'speedtest')+' schedule has no active days - pick a day or turn it off.'); return; } }
   const msg=$('settingsMsg'); msg.textContent='Saving…';
   try {
     // Apply access changes first - setting a password re-issues the session
     // cookie, so the settings POST that follows stays authenticated. Bail if it
     // fails: postAccess has already shown the error, and we must not clear the
     // typed password, POST the settings, or close the drawer as if it saved.
-    if(!await postAccess(accessBody())) return;
+    if(!await postAccess(accessBody())){ saveFailed(); return; }
     $('authPass').value=''; $('authCurPass').value=''; // access (incl. any password) applied - safe to clear
     const r=await fetch('api/settings',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)});
     if(r.ok){ applySettings(await r.json());
@@ -7871,8 +7886,8 @@ <h2><span class="drag-handle" title="Drag to reorder" aria-hidden="true"><svg vi
         if(lb) flashStatus('Saved - but '+(lb.label||lb.addr)+' points at localhost, which inside this bridged container is the container itself, not the machine running your iperf3 server. Use the host\'s LAN IP or host.docker.internal.'); } }
     // Access was POSTed first (and applied); if the settings POST fails, say so -
     // so Discard isn't mistaken for "nothing was saved".
-    else msg.textContent=(await r.text())+' (access/security settings, if changed, were already applied)';
-  } catch(e){ msg.textContent='failed'; }
+    else saveFailed((await r.text())+' (access/security settings, if changed, were already applied)');
+  } catch(e){ saveFailed('failed'); }
   } finally { saveInFlight=false; $('saveSettings').disabled=false; }
 });
 

internal/web/ui/ui.test.mjs

@@ -4948,3 +4948,36 @@ test('the heartbeat tip says Test is a real check-in', () => {
   assert.match(tip, /\n• Blank = off\./, 'both of them');
   assert.doesNotMatch(tip, /simulat/, 'nothing here may read as a rehearsal');
 });
+
+test('a long settings message wraps inside its own column instead of moving the buttons', () => {
+  // Sized to its own text the message overflowed the action row, and the iperf3
+  // no-server warning pushed Reset tiles onto a line of its own.
+  const rule = html.match(/\n\s*#settingsMsg\s*\{[^}]*\}/);
+  assert.ok(rule, 'the message needs its own rule, or it sizes to its text and overflows the row');
+  assert.match(rule[0], /flex:\s*1 1 0/, 'it has to take the leftover space rather than demand its own');
+  assert.match(rule[0], /min-width:\s*0/,
+    'without this a long unbroken message refuses to shrink below its content width');
+  const foot = html.match(/id="resetSettings"[^>]*>/)[0];
+  assert.doesNotMatch(foot, /margin-left:auto/,
+    'the message column does the spacing now; two mechanisms for it drift apart');
+});
+
+test('every save that does not save turns the button red', () => {
+  const rule = html.match(/\n\s*\.btn\.err\s*\{[^}]*\}/);
+  assert.ok(rule, 'the failed-save state needs its own rule');
+  assert.match(rule[0], /var\(--down\)/,
+    'it has to use the palette down colour, so every theme gets its own red');
+
+  const at = html.indexOf("$('saveSettings').addEventListener('click'");
+  const end = html.indexOf('saveInFlight=false', at);
+  const handler = html.slice(at, end);
+  assert.ok(at > 0 && end > at, 'could not find the save handler');
+  // Every bail-out routes through saveFailed. A path that writes the message
+  // directly would explain itself and still leave the button looking normal.
+  assert.doesNotMatch(handler, /\$\('settingsMsg'\)\.textContent\s*=/,
+    'a blocked save wrote the message without marking the button');
+  assert.match(handler, /classList\.remove\('err'\)/,
+    'each attempt has to start clean, or a retry that works still looks failed');
+  assert.match(html.slice(html.indexOf('function openDrawer(')), /classList\.remove\('err'\)/,
+    'a failure that was discarded must not colour a freshly opened drawer');
+});