From 2ee4aafd05cc72fcb5a1f6da2738495277604018 Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 7 Jan 2026 00:43:44 +0100
Subject: [PATCH] Fix z-index layering for page headers below app top bar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Changed Home.vue sticky header from z-40 to z-30
- Changed SubmissionDetail.vue sticky header from z-40 to z-30
- AppTopBar remains at z-40, ensuring it stays above page content

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/modules/nostr-feed/components/SubmissionDetail.vue | 2 +-
 src/pages/Home.vue                                     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/modules/nostr-feed/components/SubmissionDetail.vue b/src/modules/nostr-feed/components/SubmissionDetail.vue
index 7fe5822..1b00bbe 100644
--- a/src/modules/nostr-feed/components/SubmissionDetail.vue
+++ b/src/modules/nostr-feed/components/SubmissionDetail.vue
@@ -277,7 +277,7 @@ watch(comments, (newComments) => {
 <template>
   <div class="min-h-screen bg-background">
     <!-- Header -->
-    <header class="sticky top-0 z-40 bg-background/95 backdrop-blur border-b">
+    <header class="sticky top-0 z-30 bg-background/95 backdrop-blur border-b">
       <div class="max-w-4xl mx-auto px-4 py-3">
         <div class="flex items-center gap-3">
           <Button variant="ghost" size="sm" @click="goBack" class="h-8 w-8 p-0">
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
index 84f89cb..8dbbeac 100644
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@@ -3,7 +3,7 @@
     <PWAInstallPrompt auto-show />
 
     <!-- Header -->
-    <div class="sticky top-0 z-40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
+    <div class="sticky top-0 z-30 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border-b">
       <div class="max-w-4xl mx-auto flex items-center justify-between px-4 py-2 sm:px-6">
         <h1 class="text-lg font-semibold">Feed</h1>
       </div>