De nieuwe widget vond meteen een fout, en die zat in de widget zelf

De Status-widget meldde "Not answering" met Errno 111 op een gateway die gewoon
werkte. Die foutmelding was het bewijs: geweigerd betekent dat de naam oploste,
alleen niet naar ons. GATE_TLS_HOST stond op de servicenaam "server", en dat is
een naam die meer apps op een Umbrel gebruiken; op een gedeeld netwerk is het
dus een gok wie je krijgt. Nu de volledige containernaam, precies de vorm die
umbrelOS van APP_HOST verlangt en die twee regels hoger in dezelfde compose al
stond.

Wat dit zegt over de aanname van gisteren: er stond dat dit "dezelfde weg is die
nginx andersom gebruikt". Dat klopte voor de richting maar niet voor de naam, en
het was opgeschreven als redenering in plaats van als meting.

De rest zijn bijstellingen van de gebruiker na het bekijken van 0.0.17. Het menu
is drie kale punten met een accent bij hover in plaats van een knop, de eerste
regel heet Settings zonder de certificaatnaam erachter, de dialoog opent in het
midden in plaats van linksboven, de widgets zijn hoger met hun waarde langs de
onderrand, reactietijd en blokhoogte zijn omgedraaid zodat de reactietijd naast
de server staat waar hij over gaat, en het log is half zo hoog.

De manifest-toets ving onderweg een echte fout: bij het herschrijven van de
release notes was de sleutel releaseNotes zelf weggeknipt.

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

whatsnext-electrum-gate/index.html.template

@@ -207,8 +207,14 @@ body {
 @media (max-width: 560px)  { .row1 { grid-template-columns: 1fr; } }
 
 /* De widgets zetten hun waarde onderaan, zodat de vijf getallen op één lijn
-   staan ook als de ene titel over twee regels valt en de andere niet. */
-.row1 .card { display: flex; flex-direction: column; }
+   staan ook als de ene titel over twee regels valt en de andere niet.
+
+   De min-height is er op verzoek van de gebruiker (27-08-2026): zonder die maat
+   bepaalt de hoogste widget de rij, en dat leverde vijf krappe blokjes op waarin
+   de titel vrijwel tegen de waarde aan stond. Met wat meer hoogte krijgt de
+   waarde de ruimte om echt onderin te staan, en dát is wat margin-top: auto
+   hierboven doet zodra er hoogte over is. */
+.row1 .card { display: flex; flex-direction: column; min-height: 10.5rem; }
 .row1 .stat-body { margin-top: auto; }
 
 /* De twee clientlijsten naast elkaar zodra er ruimte is; het zijn twee losse
@@ -349,7 +355,10 @@ body {
   flex: 0 0 auto;
   /* Er passen vier regels in; dat is de bodem voor een leeg of net gestart log. */
   min-height: 110px;
-  max-height: 60vh;
+  /* De helft van wat het was, op verzoek van de gebruiker (27-08-2026). Met 60vh
+     vulde het log het scherm terwijl er zelden meer dan een handvol regels in
+     staat; wat er niet in past, scrolt hier toch al. */
+  max-height: 30vh;
   overflow: auto;
   overscroll-behavior: contain;
   scrollbar-width: thin;
@@ -410,17 +419,32 @@ body {
 .menu > summary { list-style: none; cursor: pointer; }
 .menu > summary::-webkit-details-marker { display: none; }
 .menu > summary::marker { content: ''; }
-/* Flink, want drie punten op de gewone knopgrootte van 0,75rem zijn nauwelijks
-   te zien en al helemaal niet te raken. De letterafstand zet ze uit elkaar,
-   anders plakken ze in de meeste letterfamilies aan elkaar. De vaste hoogte en
-   line-height houden de knop even hoog als hij met tekst erin zou zijn. */
+/* Geen knoplook, op verzoek van de gebruiker (27-08-2026): alleen de drie punten,
+   met een accent bij hover. Hier stond de klasse .btn, en die gaf er een rand en
+   een vlak omheen die niets toevoegden naast een kop met alleen het merk erin.
+
+   Flink van formaat, want drie punten op de gewone knopgrootte van 0,75rem zijn
+   nauwelijks te zien en al helemaal niet te raken. De letterafstand zet ze uit
+   elkaar, anders plakken ze in de meeste letterfamilies aan elkaar. De padding
+   blijft: dat is het raakvlak, ook al is er niets omheen te zien. */
 .menu-button {
+  display: inline-flex; align-items: center; justify-content: center;
   font-size: 1.4rem;
   line-height: 1;
   letter-spacing: 0.08em;
-  padding: 0.3rem 0.7rem 0.5rem;
+  padding: 0.25rem 0.6rem 0.45rem;
   min-height: 2rem;
+  color: var(--text-sec);
+  border-radius: var(--radius-sm);
+  transition: color 0.2s var(--ease-out);
 }
+.menu-button:hover { color: var(--accent); }
+/* Ook accent zolang het menu openstaat, anders lijkt de knop terug te springen
+   naar rust terwijl het paneel eronder nog open is. */
+.menu[open] > .menu-button { color: var(--accent); }
+/* Zonder rand is er geen vorm die de standaard focusring volgt, dus die zetten
+   we zelf; met het toetsenbord moet zichtbaar zijn waar je staat. */
+.menu-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
 .menu-panel {
   position: absolute; right: 0; top: calc(100% + 0.4rem);
   z-index: 20; min-width: 15rem;
@@ -445,6 +469,15 @@ body {
    geen hoogte van een buur, dus de keuzelijst en het uploadblok kunnen hier
    gewoon staan zonder dat er elders leegte ontstaat. */
 .sheet {
+  /* Midden op het scherm, in beide richtingen (27-08-2026: hij kwam linksboven
+     terecht). Niet op de standaardopmaak van de browser vertrouwen: die zet een
+     dialog absoluut ten opzichte van zijn dichtstbijzijnde geplaatste voorouder,
+     en deze staat in het raster van de pagina. Vast plaatsen met inset 0 en
+     marge auto centreert hem tegen het scherm, ongeacht waar hij in de HTML
+     staat. */
+  position: fixed;
+  inset: 0;
+  margin: auto;
   /* Alleen van belang in de terugvalroute zonder showModal; zie de HTML. */
   grid-column: 1 / -1;
   width: min(46rem, calc(100vw - 2rem));
@@ -582,11 +615,15 @@ body {
            staan op de basislijn en zakken dus naar de onderrand van de knop,
            terwijl deze vanzelf op halve hoogte staan. Hetzelfde teken dat elders
            op deze pagina de velden in een keuzeregel scheidt. -->
-      <summary class="btn menu-button" title="Settings" aria-label="Settings">···</summary>
+      <summary class="menu-button" title="Settings" aria-label="Settings">···</summary>
       <div class="menu-panel">
+        <!-- "Settings…" en niet "Certificates", en zonder de naam van het actieve
+             certificaat erachter (27-08-2026, gebruiker). Die naam stond al als
+             onderregel van de certificaatwidget, dus hier was het een derde plek
+             voor dezelfde waarde. Het beletselteken is de gebruikelijke belofte
+             dat er een dialoog volgt en niet meteen een handeling. -->
         <button class="menu-item" id="menu-certs" type="button">
-          <span>Certificates</span>
-          <span class="menu-meta" id="menu-certs-meta"></span>
+          <span>Settings…</span>
         </button>
         <!-- De regel toont de huidige stand en niet de handeling. De losse knop
              hiervoor deed het andersom, met "Light" terwijl de pagina donker was.
@@ -684,16 +721,11 @@ body {
       </div>
     </div>
 
-    <div class="card">
-      <div class="card-head">
-        <h2 class="t-h3">Block height</h2>
-      </div>
-      <div class="stat-body">
-        <div class="stat-val unknown" id="stat-height">unknown</div>
-        <div class="stat-sub" id="stat-height-sub"></div>
-      </div>
-    </div>
-
+    <!-- Reactietijd vóór blokhoogte, omgedraaid op verzoek van de gebruiker
+         (27-08-2026). Hij staat daarmee naast de Electrum-server waar hij over
+         gaat, en de blokhoogte schuift naar het midden van de rij. Let op: dit is
+         de leesvolgorde in de HTML en dus ook de stapelvolgorde op een smal
+         scherm; er staat nergens een order in de CSS die daarvan afwijkt. -->
     <div class="card">
       <div class="card-head">
         <h2 class="t-h3">Backend response</h2>
@@ -704,6 +736,16 @@ body {
       </div>
     </div>
 
+    <div class="card">
+      <div class="card-head">
+        <h2 class="t-h3">Block height</h2>
+      </div>
+      <div class="stat-body">
+        <div class="stat-val unknown" id="stat-height">unknown</div>
+        <div class="stat-sub" id="stat-height-sub"></div>
+      </div>
+    </div>
+
     <!-- Het certificaat als getal en niet als kaart. Kiezen, uploaden en de
          details zitten sinds 27-08-2026 in de dialoog achter het menu; wat hier
          staat is wat je in één oogopslag wilt weten. Het aantal dagen tot
@@ -729,7 +771,7 @@ body {
          en niet de weg ernaartoe; de onderregel zegt dat er ook bij. -->
     <div class="card">
       <div class="card-head">
-        <h2 class="t-h3">Gateway</h2>
+        <h2 class="t-h3">Status</h2>
       </div>
       <div class="stat-body">
         <div class="stat-val text unknown" id="self-state">unknown</div>
@@ -752,7 +794,10 @@ body {
        staat er in .sheet een grid-column op de volle breedte. -->
   <dialog id="cert-dialog" class="sheet">
     <form method="dialog" class="sheet-head">
-      <h2 class="t-h3">Certificates</h2>
+      <!-- Zelfde woord als de menuregel die hem opent. Stond hier "Certificates"
+           terwijl je op "Settings…" klikte, en dan lijkt het even of je ergens
+           anders bent uitgekomen dan je dacht. -->
+      <h2 class="t-h3">Settings</h2>
       <button class="btn" value="close" aria-label="Close">Close</button>
     </form>
 
@@ -1116,7 +1161,6 @@ body {
     put('cert-domain', tls.domain);
     put('cert-dialog-domain', tls.domain);
     put('cert-reload', whenLocal(cert.last_reload));
-    el('menu-certs-meta').textContent = cert.selected ? (tls.domain || 'in use') : 'none in use';
     renderCertAlert(daysLeft);
     drawCertChoices(s.certificates, cert.selected, nowSec);