Move away from fixed positioned page elements because they act squirrely on android

src/lib/components/Page.svelte

@@ -9,6 +9,6 @@
 
 <div
   data-component="Page"
-  class="scroll-container bottom-sai top-sai cw fixed mb-14 overflow-auto bg-base-200 md:mb-0 {props.class}">
+  class="relative flex-grow flex flex-col min-w-0 ml-sai mb-sai mt-sai mr-sai bg-base-200 md:ml-0 md:mb-0 {props.class}">
   {@render props.children?.()}
 </div>

src/lib/components/PageBar.svelte

@@ -9,7 +9,7 @@
   const {children, ...props}: Props = $props()
 </script>
 
-<div data-component="PageBar" class="cw top-sai fixed z-nav p-2 {props.class}">
+<div data-component="PageBar" class="relative z-nav p-2 -mb-4 {props.class}">
   <div class="rounded-xl bg-base-100 p-4 shadow-md h-20 md:h-12 flex flex-col justify-center">
     {@render children?.()}
   </div>

src/lib/components/PageContent.svelte

@@ -10,10 +10,7 @@
 
   let {children, element = $bindable(), ...props}: Props = $props()
 
-  const className = cx(
-    props.class,
-    "scroll-container cw cb ct fixed z-feature overflow-y-auto overflow-x-hidden",
-  )
+  const className = cx(props.class, "scroll-container z-feature overflow-y-auto overflow-x-hidden")
 </script>
 
 <div {...props} bind:this={element} data-component="PageContent" class={className}>

src/lib/components/SecondaryNav.svelte

@@ -12,7 +12,7 @@
 
 <div
   class={cx(
-    "ml-sai mt-sai mb-sai max-h-screen w-60 sm:flex-shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
+    "mt-sai mb-sai max-h-screen w-60 min-h-0 flex-shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
     props.class,
   )}>
   {@render children?.()}

src/lib/components/SecondaryNavSection.svelte

@@ -7,6 +7,6 @@
   const {...props}: Props = $props()
 </script>
 
-<div class="flex flex-col gap-1 px-2 py-4 {props.class}">
+<div class="flex flex-col gap-1 px-2 py-2 {props.class}">
   {@render props.children?.()}
 </div>