fix(frontend): the content is padded by the filled header before paint, not when the observer catches up

The header's pills now arrive by portal after the shell has mounted, so the shell's one synchronous
measurement saw an empty header, and the ResizeObserver brought `--hdr-h` up a frame or more later:
meanwhile the content sat under the pills (the feed toolbar jumped 55px on a tablet; e2e caught it).
The measurement re-runs before paint whenever what fills the header changes.

frontend/src/components/ui/PageShell.header.dom.test.tsx

@@ -89,6 +89,38 @@ describe("the header slot", () => {
     expect(screen.getByTestId("hdr").textContent).toBe("search");
   });
 
+  it("pads the content by the filled header before paint, not when the observer catches up", () => {
+    // jsdom does no layout: the header's height here is one 40px row per pill in it. The observer
+    // never fires in this test, so only a measurement made as the pills arrive can see them.
+    const height = (el: HTMLElement) => 40 * el.childElementCount;
+    const page = (own: boolean) => (
+      <PageShell header={hdr}>
+        {own && (
+          <PageHeader>
+            <span>search</span>
+            <span>scope</span>
+          </PageHeader>
+        )}
+        {fallback}
+      </PageShell>
+    );
+    const { rerender, container } = render(<PageShell header={hdr}>{null}</PageShell>);
+    Object.defineProperty(screen.getByTestId("hdr"), "offsetHeight", {
+      get() {
+        return height(this as HTMLElement);
+      },
+      configurable: true,
+    });
+    const pad = () =>
+      (container.querySelector('[class*="pt-(--hdr-h)"]') as HTMLElement).style.getPropertyValue(
+        "--hdr-h",
+      );
+    rerender(page(false));
+    expect(pad()).toBe("44px"); // the default alone: one row
+    rerender(page(true));
+    expect(pad()).toBe("84px"); // the page's two pills, the default gone
+  });
+
   it("renders a page's pills nowhere in a shell without a header", () => {
     render(
       <PageShell>