bugfix: measure bar heights with ResizeObserver instead of magic numbers (0.21.2)

frontend/src/routes/+layout.svelte

@@ -14,11 +14,32 @@
 
     let { children } = $props();
     let loggingOut = $state(false);
+    let headerEl: HTMLElement | undefined = $state();
 
     onMount(() => {
         theme.init();
         preferences.init();
         if (!session.loaded) session.refresh();
+
+        // Publish the header's measured height as a CSS custom
+        // property so sticky descendants (e.g. the reader nav) can
+        // pin themselves directly below it without guessing. A
+        // ResizeObserver keeps it in sync as the viewport reflows
+        // (the nav `flex-wrap: wrap`s on narrow widths), the user
+        // zooms, or fonts swap. Hard-coded pixel offsets in tokens
+        // are wrong in principle — actual height varies with all
+        // of the above.
+        if (!headerEl) return;
+        const publish = () => {
+            document.documentElement.style.setProperty(
+                '--app-header-h',
+                `${headerEl!.offsetHeight}px`
+            );
+        };
+        publish();
+        const ro = new ResizeObserver(publish);
+        ro.observe(headerEl);
+        return () => ro.disconnect();
     });
 
     // Pull fresh server preferences whenever the user changes (login,
@@ -46,7 +67,7 @@
     }
 </script>
 
-<header>
+<header bind:this={headerEl}>
     <nav aria-label="primary">
         <a class="brand" href="/">Mangalord</a>
         <a class="nav-link" href="/upload">