Fix scrolling areas

index.html

@@ -624,7 +624,7 @@
     </div>
 
     <script>
-        const APP_ASSET_VERSION = '20260415-163';
+        const APP_ASSET_VERSION = '20260416-164';
         const APP_VERSION_STORAGE_KEY = 'recipe-app-asset-version';
         const APP_VERSION_QUERY_KEY = 'appv';
 

js/views/Pantry.js

@@ -174,7 +174,7 @@ export function getPantryHTML() {
     <div id="pantry-view" class="hidden flex flex-col h-full absolute inset-0 overflow-hidden z-10" style="background:#2d2e2b !important;">
 
         <!-- ── floating top bar ── -->
-        <div class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4" style="background:transparent !important; border:none !important;">
+        <div id="pantry-topbar-outer" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:#2d2e2b !important; border:none !important;">
             <div class="pointer-events-auto relative z-[1] mx-auto" style="width:min(calc(100% - 0.5rem), 22.4rem);">
                 <div id="pantry-topbar" class="relative min-h-12">
                     <div id="pantry-default-row" class="flex min-h-12 items-center gap-2 transition-all duration-200" style="opacity:1; transform:translateY(0) scale(1);">
@@ -716,6 +716,18 @@ export function setupPantry() {
     syncHorizonUI();
     renderBoard();
 
+    // Scroll shadow under top bar
+    const pantryScroll = document.getElementById('pantry-scroll');
+    const topbarOuter = document.getElementById('pantry-topbar-outer');
+    if (pantryScroll && topbarOuter) {
+        const shadow = document.createElement('div');
+        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(0,0,0,0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
+        topbarOuter.appendChild(shadow);
+        pantryScroll.addEventListener('scroll', () => {
+            shadow.style.opacity = pantryScroll.scrollTop > 2 ? '1' : '0';
+        });
+    }
+
     // Search
     document.getElementById('pantry-search')?.addEventListener('input', () => renderBoard());
     document.getElementById('pantry-search')?.addEventListener('keydown', (event) => {

js/views/RecipeList.js

@@ -114,7 +114,7 @@ function renderGrid() {
 export function getRecipeListHTML() {
     return `
     <div id="main-view" class="flex flex-col h-full absolute inset-0 bg-[#2d2e2b] z-10" style="background:#2d2e2b !important;">
-        <div id="recipe-top-bar" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4" style="background:transparent !important; border:none !important;">
+        <div id="recipe-top-bar" class="pointer-events-none absolute inset-x-0 top-0 z-[12] px-4 pt-4 pb-4" style="background:#2d2e2b !important; border:none !important;">
             <div class="pointer-events-auto relative z-[1] mx-auto" style="width:min(calc(100% - 0.5rem), 22.4rem);">
                 <div id="recipe-topbar" class="relative min-h-12">
 
@@ -205,8 +205,16 @@ export function setupRecipeList() {
         if (recipeId) window.openRecipeDetail?.(recipeId);
     });
 
-    document.getElementById('recipe-scroll')?.addEventListener('scroll', syncRecipeScrollShadow);
+    const recipeScroll = document.getElementById('recipe-scroll');
-    syncRecipeScrollShadow();
+    const recipeTopBar = document.getElementById('recipe-top-bar');
+    if (recipeScroll && recipeTopBar) {
+        const shadow = document.createElement('div');
+        shadow.style.cssText = 'position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(to bottom,rgba(0,0,0,0.25),transparent);opacity:0;transition:opacity 0.2s;pointer-events:none;';
+        recipeTopBar.appendChild(shadow);
+        recipeScroll.addEventListener('scroll', () => {
+            shadow.style.opacity = recipeScroll.scrollTop > 2 ? '1' : '0';
+        });
+    }
 
     if (!recipeListDocListenersBound) {
         recipeListDocListenersBound = true;