k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-11-12 23:31:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(journey): the feed's entries are gone under the header pills, not half seen between them

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
client/src/mobile/screens/journey/MJourneyDetail.tsx
+3 -2
View File
@@ -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
client/tests/unit/mobile/journey/MJourneyDetail.test.tsx
+10 -1
View File
@@ -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' });