mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-19 13:36:48 +00:00
fix(shared): keep the header's decoration from widening the page
The two decorative circles in the header are positioned outside it on purpose (-40 to -60 on each axis) and nothing in the ancestor chain clips them, so the first one widened the document by its own overhang: a 390px phone reported a 450px scrollWidth and the whole page could be dragged sideways (#2345). overflow: hidden on the header is what the decoration always meant.
This commit is contained in:
@@ -1450,4 +1450,19 @@ describe('SharedTripPage', () => {
|
||||
expect(document.querySelector('a[href^="javascript:"]')).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
// ── #2345: the header has to clip the decoration it bleeds ──────────────
|
||||
|
||||
describe('FE-PAGE-SHARED-040: the header clips the circles it bleeds (#2345)', () => {
|
||||
it('does not let them widen the page', async () => {
|
||||
await open('overflow-token', payload({}));
|
||||
|
||||
// Both circles sit outside the header on purpose, so the page only stays
|
||||
// as wide as the viewport if the header itself is the clip. The header is
|
||||
// the first gradient panel on the page and carries the trip title.
|
||||
const header = document.querySelector<HTMLElement>('div[style*="linear-gradient(135deg"]');
|
||||
expect(header?.textContent).toContain('Shared Paris Trip');
|
||||
expect(header?.style.overflow).toBe('hidden');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -205,6 +205,12 @@ export default function SharedTripPage() {
|
||||
padding: '32px 20px 28px',
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
// The two circles below bleed past this box on purpose (-40 to -60 on
|
||||
// each axis) and nothing else on the page clips them, so without this
|
||||
// the header widened the document by 60px: 390 + 60 = the 450px
|
||||
// scrollWidth a 390px phone reported, and the whole page could be
|
||||
// dragged sideways (#2345).
|
||||
overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
{/* Cover image background */}
|
||||
|
||||
Reference in New Issue
Block a user