[fix](trx-frontend-http): let the decode lists fill their panel

FT8, FT4, FT2 and WSPR size their list against the panel with flex, and
the sidebar layout made the panel a grid item aligned to the start of
its row — sized to its own content.  The lists collapsed to their 120px
minimum with several hundred pixels of the page empty underneath.  The
panel stretches to the row now and the sidebar keeps its own height.

The marine lists were sized a different way, by formula: 100vh minus a
guess at everything above them.  That guess stopped matching the moment
the panel changed shape, so they left a few hundred pixels unused as
well.  They fill the panel like the rest now, and so does CW, which had
a 360px ceiling.

HF APRS had no container styling at all — no scroller, no frame, no
height — so its packets ran down the page.  It gets what the other
packet lists have.

The smoke test measures each list against its panel and requires it to
scroll on its own.

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

src/trx-client/trx-frontend/trx-frontend-http/frontend/tests/browser-smoke.mjs

@@ -47,6 +47,29 @@ try {
   assert.ok(digital.panelBesideSidebar, "the decoder panel does not sit beside the sidebar");
   assert.deepEqual(digital.panelsShown, ["subtab-ft8"], `panels shown: ${JSON.stringify(digital.panelsShown)}`);
   assert.ok(digital.decoders >= 10, `only ${digital.decoders} decoders in the sidebar`);
+
+  // Each decoder's list fills its panel. FT8, FT4, FT2 and WSPR size against
+  // the panel with flex, so a panel sized to its own content collapsed them to
+  // their 120px minimum with the rest of the page left empty; the marine lists
+  // were sized by a viewport formula that stopped matching when the panel
+  // changed shape.
+  for (const [subtab, list] of [["ft8", "ft8-messages"], ["wspr", "wspr-messages"],
+    ["ais", "ais-messages"], ["aprs", "aprs-packets"], ["hf-aprs", "hf-aprs-packets"]]) {
+    await page.locator(`.sub-tab[data-subtab="${subtab}"]`).click();
+    await page.waitForTimeout(150);
+    const filled = await page.evaluate((id) => {
+      const element = document.getElementById(id);
+      const panel = element.closest(".sub-tab-panel");
+      return {
+        list: Math.round(element.getBoundingClientRect().height),
+        panel: Math.round(panel.getBoundingClientRect().height),
+        scrolls: getComputedStyle(element).overflowY,
+      };
+    }, list);
+    assert.ok(filled.list > filled.panel * 0.6,
+      `${subtab}: the list is ${filled.list}px in a ${filled.panel}px panel`);
+    assert.equal(filled.scrolls, "auto", `${subtab}: the list does not scroll on its own`);
+  }
   await page.locator('.tab[data-tab="main"]').click();
   await page.waitForTimeout(200);