layout improvements

src/lib/components/BottomNav.svelte

@@ -3,6 +3,10 @@
   import { page } from '$app/stores';
   import { goto } from '$app/navigation';
 
+  // When a className is supplied the parent positions this bar (e.g. inside a
+  // measured in-flow stack); otherwise it self-positions as a fixed bottom bar.
+  let { className = "fixed bottom-0 left-0 right-0 z-40" }: { className?: string } = $props();
+
   // Determine if a route is active
   function isActive(path: string): boolean {
     const pathname = $page.url.pathname;
@@ -15,7 +19,7 @@
 </script>
 
 <!-- Navigation bar visible on all platforms -->
-<nav class="fixed bottom-0 left-0 right-0 bg-[var(--color-surface)] border-t border-gray-800 z-40">
+<nav class="{className} bg-[var(--color-surface)] border-t border-gray-800">
   <div class="flex items-center justify-around px-4 py-2">
     <!-- Home Button -->
     <button