another try

src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { authStore } from './lib/stores/auth';
+  import { uiStore } from './lib/stores/ui';
   import AppHeader from './lib/components/Layout/AppHeader.svelte';
   import TabBar, { type TabId } from './lib/components/Layout/TabBar.svelte';
   import Scanner from './lib/components/Pages/Scanner.svelte';
@@ -30,6 +31,16 @@
   // Auth state from store
   const auth = $derived(authStore);
   
+  // UI state
+  let isDetailPageOpen = $state(false);
+  
+  $effect(() => {
+    const unsubscribe = uiStore.subscribe(state => {
+      isDetailPageOpen = state.isDetailPageOpen;
+    });
+    return unsubscribe;
+  });
+  
   onMount(async () => {
     // Load HF libraries
     const script1 = document.createElement('script');
@@ -110,9 +121,11 @@
 </script>
 
 <div class="app">
-  <AppHeader {hfAuth} currentTab={tabNames[activeTab]} />
+  {#if !isDetailPageOpen}
+    <AppHeader {hfAuth} currentTab={tabNames[activeTab]} />
+  {/if}
   
-  <main class="app-content">
+  <main class="app-content" class:detail-open={isDetailPageOpen}>
     {#if activeTab === 'scanner'}
       <Scanner 
         {fluxClient}
@@ -126,7 +139,9 @@
     {/if}
   </main>
   
-  <TabBar {activeTab} onTabChange={handleTabChange} />
+  {#if !isDetailPageOpen}
+    <TabBar {activeTab} onTabChange={handleTabChange} />
+  {/if}
 </div>
 
 <style>
@@ -146,6 +161,10 @@
     padding-bottom: calc(70px + env(safe-area-inset-bottom, 0));
   }
   
+  .app-content.detail-open {
+    padding-bottom: 0;
+  }
+  
   /* Ensure content scrolls properly on iOS */
   :global(.app-content > *) {
     height: 100%;

src/lib/components/Piclets/PicletDetail.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
+  import { onMount } from 'svelte';
   import type { PicletInstance } from '$lib/db/schema';
   import { deletePicletInstance } from '$lib/db/piclets';
+  import { uiStore } from '$lib/stores/ui';
   
   interface Props {
     instance: PicletInstance;
@@ -13,6 +15,13 @@
   let selectedTab = $state<'about' | 'stats' | 'actions'>('about');
   let expandedMoves = $state(new Set<number>());
   
+  onMount(() => {
+    uiStore.openDetailPage();
+    return () => {
+      uiStore.closeDetailPage();
+    };
+  });
+  
   async function handleDelete() {
     if (!instance.id) return;
     
@@ -46,8 +55,7 @@
   }
 </script>
 
-<div class="detail-backdrop">
-  <div class="detail-page">
+<div class="detail-page">
     <div class="navigation-bar">
       <button class="back-btn" onclick={onClose}>
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -224,32 +232,19 @@
         {/if}
       </div>
     </div>
-  </div>
 </div>
 
 <style>
-  .detail-backdrop {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 9998;
-    background: rgba(0, 0, 0, 0.5);
-  }
-  
   .detail-page {
-    position: absolute;
+    position: fixed;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: #f2f2f7;
-    z-index: 9999;
+    z-index: 1000;
     display: flex;
     flex-direction: column;
-    transform: translateZ(0);
-    -webkit-transform: translateZ(0);
   }
   
   /* Navigation Bar */

src/lib/stores/ui.ts

@@ -0,0 +1,19 @@
+import { writable } from 'svelte/store';
+
+interface UIState {
+  isDetailPageOpen: boolean;
+}
+
+function createUIStore() {
+  const { subscribe, set, update } = writable<UIState>({
+    isDetailPageOpen: false
+  });
+
+  return {
+    subscribe,
+    openDetailPage: () => update(state => ({ ...state, isDetailPageOpen: true })),
+    closeDetailPage: () => update(state => ({ ...state, isDetailPageOpen: false }))
+  };
+}
+
+export const uiStore = createUIStore();