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.
This commit is contained in:
Maurice
2026-11-08 01:11:01 +00:00
parent 82fcdcd0fc
commit ee9cbce23d
2 changed files with 13 additions and 3 deletions
@@ -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