fix: don't stack multiple phone header controls on top of each other

App-primaryControl is an extension point, so a page can carry several
header controls — core's 'start discussion' button plus, say, an
extension's follow button on a tag page. On phones each one is
positioned absolutely against the right edge, so they rendered on top of
one another as a single smudged glyph.

Where the controls share a parent — they are list items of the same nav
— that parent now becomes a right-anchored flex row and the controls
return to relative positioning, letting the browser lay them out side by
side at whatever width each one is. Selected with :has() so it only
applies when a second control is actually present; pages with a single
control keep their existing geometry exactly.

Measured at 390px: the tag page's two controls went from both occupying
339-390 to 288-339 and 339-390; index, discussion and user pages are
byte-identical.

Author: imorland

framework/core/less/common/App.less

@@ -53,6 +53,29 @@
       width: 40px;
     }
   }
+  // `App-primaryControl` is an extension point, so a page can carry several
+  // controls (core's "start discussion" plus, say, an extension's follow
+  // button). Each is absolutely positioned against the right edge, which
+  // stacks them on top of one another. Where they share a parent — they are
+  // list items of the same nav — that parent becomes a right-anchored flex
+  // row instead, so the browser lays them out side by side at whatever width
+  // each one happens to be.
+  :has(> .App-primaryControl ~ .App-primaryControl) {
+    position: absolute;
+    z-index: calc(~"var(--zindex-header) + 1");
+    top: 0;
+    right: 0;
+    display: flex;
+
+    .App.affix &, .Composer & {
+      position: fixed;
+    }
+
+    > .App-primaryControl {
+      position: relative !important;
+      right: auto;
+    }
+  }
   .App-primaryControl {
     width: auto;
     right: 0;