gui: a Providers row with a vendor's outage badge is laid out by a class, not :has(), which Safari 15.0 doesn't parse (old-webkit failed on 2a990175's .provider .name:has(> .badge.upstream) since #971)

The Providers row's name gets with-upstream while it holds the badge, and loses it when the badge goes. old-webkit's style check passes this rule again; upstream-status passes in Chromium and WebKit.

internal/gui/assets/app.css

@@ -1841,7 +1841,7 @@ body.window .ag-sk-icon { width: 22px; height: 22px; border-radius: 6px; }
 .provider .name .badge { margin-left: 6px; }
 /* a row whose name holds a vendor's outage badge (#971): the name gives
    way to it, the badge is never the part cut */
-.provider .name:has(> .badge.upstream) { display: flex; align-items: center; }
+.provider .name.with-upstream { display: flex; align-items: center; }
 .provider .name > .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
 .badge { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 5px; border-radius: 4px; background: var(--amber-soft); color: var(--amber); vertical-align: 1px; }
 .provider.selected { background: var(--card-2); }

internal/gui/assets/app.js

@@ -4506,6 +4506,7 @@ function markUpstream() {
   const put = (box, s, after) => {
     if (!box) return;
     box.querySelector(":scope > .badge.upstream")?.remove();
+    box.classList.remove("with-upstream");
     if (!s) return;
     // a row's name as a box of its own, to be the part cut short
     if (!after && box.firstChild?.nodeType === Node.TEXT_NODE) {
@@ -4515,6 +4516,8 @@ function markUpstream() {
     }
     const b = upstreamBadge(s);
     if (after) after.after(b); else box.append(b);
+    // a class, not :has(), which Safari 15.0 doesn't parse (#220)
+    box.classList.add("with-upstream");
   };
   for (const row of document.querySelectorAll("#providers .row.provider[data-id], #offProviders .row.provider[data-id]")) {
     put(row.querySelector(".name"), upstreamOf(row.dataset.id));