From ee9cbce23dc6fa5606d1cf8530ebb3a94155d9bb Mon Sep 17 00:00:00 2001
From: Maurice <mauriceboe@icloud.com>
Date: Sun, 8 Nov 2026 01:11:01 +0000
Subject: [PATCH] fix(journey): the feed's entries are gone under the header
 pills, not half seen between them

Scrolled up, a day's head showed at a third of its strength between the
back button and the segment, because the feed's mask let content through
from 22px below the safe area while the pills reach 38px. It is now
transparent down to 40px and whole from 60px, where the first day's head
starts.
---
 client/src/mobile/screens/journey/MJourneyDetail.tsx  |  5 +++--
 .../tests/unit/mobile/journey/MJourneyDetail.test.tsx | 11 ++++++++++-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/client/src/mobile/screens/journey/MJourneyDetail.tsx b/client/src/mobile/screens/journey/MJourneyDetail.tsx
index a3831d906..badbbe799 100644
--- a/client/src/mobile/screens/journey/MJourneyDetail.tsx
+++ b/client/src/mobile/screens/journey/MJourneyDetail.tsx
@@ -422,11 +422,12 @@ export default function MJourneyDetail({ journeyId, embedded = false }: JourneyD
       {feed && (
         <div
           className="absolute inset-y-0 z-[6] overflow-y-auto overflow-x-hidden border-e border-[color:var(--m-rowbr)] bg-[color:var(--m-bg)] bg-[image:var(--m-scr)] px-4 pb-[calc(var(--bottom-nav-h,84px)+16px)] pt-[calc(var(--m-safe-top,12px)+60px)]"
-          // Entries scrolled up fade out under the header's pills instead of showing through between them.
+          // Entries scrolled up fade out under the header's pills instead of showing through between them:
+          // gone down to the pills' lower edge (38px tall), whole again before the first day's head.
           style={{
             insetInlineStart: 'var(--m-rail-w, 0px)',
             width: 'var(--m-pane-aside-w)',
-            maskImage: 'linear-gradient(180deg, transparent calc(var(--m-safe-top, 12px) + 22px), #000 calc(var(--m-safe-top, 12px) + 58px))',
+            maskImage: 'linear-gradient(180deg, transparent calc(var(--m-safe-top, 12px) + 40px), #000 calc(var(--m-safe-top, 12px) + 60px))',
           }}
         >
           <MJourneyFeed
diff --git a/client/tests/unit/mobile/journey/MJourneyDetail.test.tsx b/client/tests/unit/mobile/journey/MJourneyDetail.test.tsx
index c66ca9f65..87835ef17 100644
--- a/client/tests/unit/mobile/journey/MJourneyDetail.test.tsx
+++ b/client/tests/unit/mobile/journey/MJourneyDetail.test.tsx
@@ -1,4 +1,4 @@
-// FE-MOB-JDET-001 to FE-MOB-JDET-049
+// FE-MOB-JDET-001 to FE-MOB-JDET-050
 import { describe, it, expect, beforeEach, afterEach, onTestFinished, vi } from 'vitest';
 import { setSizeClass } from '../../../helpers/sizeClass';
 import { render, screen, fireEvent, waitFor, act } from '../../../helpers/render';
@@ -816,6 +816,15 @@ describe('MJourneyDetail', () => {
     expect(screen.getByRole('button', { name: /Kyoto/ })).toHaveAttribute('aria-current', 'true');
   });
 
+  it('FE-MOB-JDET-050: the feed hides what scrolls under the header pills down to their lower edge', () => {
+    setSizeClass('split');
+    setup();
+    const feed = screen.getByRole('button', { name: /Kyoto/ }).closest('.overflow-y-auto') as HTMLElement;
+    // Transparent through the 38px pills below the safe area, whole before the first day's head at +60px.
+    expect(feed.style.maskImage).toMatch(/transparent calc\(var\(--m-safe-top, 12px\) \+ 40px\)/);
+    expect(feed.style.maskImage).toMatch(/#000 calc\(var\(--m-safe-top, 12px\) \+ 60px\)/);
+  });
+
   it('FE-MOB-JDET-048: the gallery takes the page, feed or not', () => {
     setSizeClass('split');
     setup({ view: 'gallery' });