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/layouts/topnav.vue

@@ -1,34 +1,35 @@
 <template>
   <div class="min-h-screen flex flex-col bg-base-300">
-    <!-- Main Navigation (Logo + Tabs + User) -->
-    <MainNavigation
-      v-show="!isHeaderCollapsed"
-      :session-checked="sessionChecked"
-      :logged-in="isLoggedIn"
-      :user-avatar-svg="userAvatarSvg"
-      :user-name="userName"
-      :user-initials="userInitials"
-      :theme="theme"
-      :user-data="userData"
-      :is-seller="isSeller"
-      @toggle-theme="toggleTheme"
-      @sign-out="onClickSignOut"
-      @sign-in="signIn()"
-      @switch-team="switchToTeam"
-    />
+    <!-- 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
+        :session-checked="sessionChecked"
+        :logged-in="isLoggedIn"
+        :user-avatar-svg="userAvatarSvg"
+        :user-name="userName"
+        :user-initials="userInitials"
+        :theme="theme"
+        :user-data="userData"
+        :is-seller="isSeller"
+        @toggle-theme="toggleTheme"
+        @sign-out="onClickSignOut"
+        @sign-in="signIn()"
+        @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"
+        :section="currentSection"
+      />
+    </div>
 
-    <!-- Sub Navigation (section-specific tabs) - hidden on home page -->
-    <SubNavigation
-      v-if="!isHomePage"
-      v-show="!isHeaderCollapsed"
-      :section="currentSection"
-    />
+    <!-- Global Search Bar - only on home page, in document flow -->
+    <GlobalSearchBar v-if="showSearch" class="border-b border-base-300 mt-16" />
 
-    <!-- Page content -->
-    <main class="flex-1 flex flex-col min-h-0 px-3 lg:px-6">
+    <!-- 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)