Fix smooth scroll animation and map positioning

- Replace v-show with transform: translateY() for smooth header collapse animation
- Wrap MainNav + SubNav in fixed container with dynamic transform
- Remove sticky positioning from MainNavigation and SubNavigation
- Fix map to extend to screen edge (right-0, no rounded corners)
- Add dynamic padding-top to main for fixed header compensation

app/components/navigation/MainNavigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="sticky top-0 z-40 bg-base-100 border-b border-base-300">
+  <header class="bg-base-100 border-b border-base-300">
     <div class="relative flex items-center h-16 px-4 lg:px-6">
       <!-- Left: Logo -->
       <div class="flex items-center">

app/components/navigation/SubNavigation.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav v-if="items.length > 0" class="sticky top-16 z-30 bg-base-100 border-b border-base-300">
+  <nav v-if="items.length > 0" class="bg-base-100 border-b border-base-300">
     <div class="flex items-center gap-1 py-2 px-4 lg:px-6 overflow-x-auto">
       <NuxtLink
         v-for="item in items"

app/components/page/CatalogPage.vue

@@ -65,7 +65,7 @@
 
           <!-- Right: Map (fixed position) -->
           <div class="w-3/5 relative">
-            <div class="fixed right-6 w-[calc(60%-3rem)] rounded-lg overflow-hidden" :style="mapStyle">
+            <div class="fixed right-0 w-3/5 overflow-hidden" :style="mapStyle">
               <!-- Search with map checkbox -->
               <label class="absolute top-4 left-4 z-10 bg-white/90 backdrop-blur px-3 py-2 rounded-lg shadow flex items-center gap-2 cursor-pointer">
                 <input type="checkbox" v-model="searchWithMap" class="checkbox checkbox-sm" />

app/layouts/topnav.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="min-h-screen flex flex-col bg-base-300">
+    <!-- Fixed Header Container (MainNav + SubNav) - slides up on scroll -->
+    <div class="fixed top-0 left-0 right-0 z-40" :style="headerStyle">
       <!-- Main Navigation (Logo + Tabs + User) -->
       <MainNavigation
-      v-show="!isHeaderCollapsed"
         :session-checked="sessionChecked"
         :logged-in="isLoggedIn"
         :user-avatar-svg="userAvatarSvg"
@@ -17,18 +18,18 @@
         @switch-team="switchToTeam"
       />
 
-    <!-- Global Search Bar -->
-    <GlobalSearchBar v-if="showSearch" class="border-b border-base-300" />
-
       <!-- Sub Navigation (section-specific tabs) - hidden on home page -->
       <SubNavigation
         v-if="!isHomePage"
-      v-show="!isHeaderCollapsed"
         :section="currentSection"
       />
+    </div>
 
-    <!-- Page content -->
-    <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6">
+    <!-- Global Search Bar - only on home page, in document flow -->
+    <GlobalSearchBar v-if="showSearch" class="border-b border-base-300 mt-16" />
+
+    <!-- Page content - padding-top compensates for fixed header -->
+    <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6" :style="mainStyle">
       <slot />
     </main>
   </div>
@@ -41,7 +42,7 @@ const { signIn, signOut, loggedIn, fetch: fetchSession } = useAuth()
 const route = useRoute()
 
 // Collapsible header for catalog pages
-const { isCollapsed } = useScrollCollapse(50)
+const { headerOffset, isCollapsed } = useScrollCollapse(118)
 
 // Theme state
 const theme = useState<'default' | 'night'>('theme', () => 'default')
@@ -100,6 +101,17 @@ const showSearch = computed(() => isHomePage.value)
 const canCollapse = computed(() => !isHomePage.value)
 const isHeaderCollapsed = computed(() => canCollapse.value && isCollapsed.value)
 
+// Header style - transform for smooth slide animation (only on catalog pages)
+const headerStyle = computed(() => {
+  if (isHomePage.value) return {}
+  return { transform: `translateY(${headerOffset.value}px)` }
+})
+
+// Main content padding-top to compensate for fixed header
+const mainStyle = computed(() => ({
+  paddingTop: isHomePage.value ? '64px' : '118px'
+}))
+
 // Provide collapsed state to child components (CatalogPage needs it for map positioning)
 provide('headerCollapsed', isHeaderCollapsed)