fix layout and pull to refresh issues

src/app.postcss

@@ -105,7 +105,7 @@
 
 html,
 body {
-    @apply h-full;
+    @apply h-full overscroll-none;
 }
 
 a:not(.unstyled):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(a.card):not(

src/lib/components/navigation/BottomTabs.svelte

@@ -17,7 +17,7 @@
 
 {#if user && $isInstalled}
     <TabGroup
-        class="bg-surface-200-700-token w-full pb-6 pt-4 md:hidden"
+        class="bottom-nav bg-surface-200-700-token w-full pt-4 md:hidden"
         active="variant-glass-primary"
         border=""
         hover="hover:variant-soft-primary"
@@ -32,3 +32,9 @@
         {/each}
     </TabGroup>
 {/if}
+
+<style global>
+    .bottom-nav {
+        padding-bottom: calc(1rem + env(safe-area-inset-bottom));
+    }
+</style>

src/routes/+layout.svelte

@@ -55,13 +55,15 @@
     initializeStores();
 
     onMount(() => {
+        $isInstalled = true;
+
         if (window.matchMedia("(display-mode: standalone)").matches) {
             $isInstalled = true;
             const ptr = PullToRefresh.init({
                 mainElement: document.getElementById("main") as unknown as string,
                 distThreshold: 70,
                 resistanceFunction: (t) => Math.min(1, t / 4.5),
-                shouldPullToRefresh: () => window.scrollY === 0,
+                shouldPullToRefresh: () => document.getElementById("main")?.scrollTop === 0,
                 onRefresh() {
                     window.location.reload();
                 }
@@ -90,22 +92,22 @@
 
 <Drawer />
 
-<div>
-    <header class="sticky top-0 z-10">
+<div class="flex h-screen flex-col overflow-hidden">
+    <header class="w-full">
         {#if showNavigationLoadingBar}
             <NavigationLoadingBar />
         {/if}
         <NavBar {navItems} user={data.user} />
     </header>
 
-    <main id="main" class="px-4 py-4 md:px-12 lg:px-32 xl:px-56" class:pb-32={$isInstalled}>
+    <main id="main" class="flex-1 overflow-y-scroll px-4 py-4 md:px-12 lg:px-32 xl:px-56">
         {#if !$isInstalled && !disabled && documentTitle}
             <h1 class="h1 pb-2 md:pb-4">{documentTitle}</h1>
         {/if}
         {@render children?.()}
     </main>
 
-    <footer class="fixed bottom-0 z-10 w-full">
+    <footer class="w-full">
         <BottomTabs {navItems} user={data.user} />
     </footer>
 </div>