[fix](trx-frontend-http): size the nav's labels against the screen, not the font

CI cut "Bookmarks" off at 360 px where this machine had ten pixels to
spare.  How wide a platform draws a word varies by more than ten per
cent, so a fixed 0.6rem label is a bet on the machine it was measured
on -- the same bet ui-core's own comment warns about where it explains
why the tab strip reflows by measurement rather than at a width.

The long labels are sized with `clamp(0.46rem, 2.2vw, 0.62rem)` now.  A
tab is a fifth of the viewport, so what fits in it follows the viewport;
tying the label to the same thing leaves better than a fifth of the tab
spare at every phone width, and holds with the text drawn 30% wider than
it is here.

The test asked the wrong question too.  "Does the label fit" is a
question about font metrics, and it will keep answering differently on
different machines.  It now asserts what actually matters: a label stays
inside its own tab, and if it is too long for it, it ends in an ellipsis
rather than being cut through a letter.  Both hold whatever width the
platform draws the words at.

Signed-off-by: Stan Grams <sjg@haxx.space>

src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/mobile-layout.mjs

@@ -61,8 +61,14 @@ try {
       `the rig picker is ${layout.rigSelect}px wide at ${width}px`);
 
     // The bottom nav keeps its labels — that is what makes it navigation
-    // rather than five glyphs — so the labels have to fit inside a tab, which
-    // is a fifth of a phone. They were being cut off mid-word: "igital mode".
+    // rather than five glyphs — and a label used to overflow its tab and run
+    // into the next one: "Bookmarks igital mode".
+    //
+    // What is asserted is that a label stays inside its own tab and, if it is
+    // too long for it, ends in an ellipsis. Not that it fits: how wide a
+    // platform draws a word varies by more than ten per cent, so "it fits"
+    // passes on the machine it was written on and fails on the next one —
+    // which is what a fixed font size did here.
     const nav = await page.evaluate(() => {
       const bar = document.querySelector(".tab-bar-nav");
       return [...bar.querySelectorAll(".tab")]
@@ -70,16 +76,28 @@ try {
         .map((tab) => {
           const label = [...tab.querySelectorAll(".tab-label, .tab-label-short")]
             .find((span) => getComputedStyle(span).display !== "none");
+          const style = label ? getComputedStyle(label) : null;
+          const labelBox = label?.getBoundingClientRect();
+          const tabBox = tab.getBoundingClientRect();
           return {
             text: (label?.textContent ?? "").trim(),
-            clipped: label ? label.scrollWidth > label.clientWidth + 1 : false,
+            escapes: labelBox
+              ? labelBox.left < tabBox.left - 1 || labelBox.right > tabBox.right + 1
+              : false,
+            truncates: style?.textOverflow === "ellipsis" && style?.overflow !== "visible",
+            empty: !labelBox || labelBox.width < 1,
           };
         });
     });
     assert.ok(nav.length >= 4, `the bottom nav has ${nav.length} destinations at ${width}px`);
-    const clipped = nav.filter((tab) => tab.clipped).map((tab) => tab.text);
-    assert.deepEqual(clipped, [],
-      `labels cut off at ${width}px: ${clipped.join(", ")}`);
+    const escaped = nav.filter((tab) => tab.escapes).map((tab) => tab.text);
+    assert.deepEqual(escaped, [],
+      `labels overflowing their tab at ${width}px: ${escaped.join(", ")}`);
+    const untruncatable = nav.filter((tab) => !tab.truncates).map((tab) => tab.text);
+    assert.deepEqual(untruncatable, [],
+      `labels that would be cut rather than ellipsised at ${width}px: ${untruncatable.join(", ")}`);
+    const blank = nav.filter((tab) => tab.empty).map((tab, index) => tab.text || `#${index}`);
+    assert.deepEqual(blank, [], `destinations with no label at ${width}px: ${blank.join(", ")}`);
   }
 
   // A tab whose visible label is shortened for the nav still has to say what