From ef259e7d7d4f3fbbaca8e6881fe54a2636d2c51c Mon Sep 17 00:00:00 2001 From: Wenyin Wei Date: Sun, 13 Sep 2026 01:13:34 +0800 Subject: [PATCH 1/2] 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. --- client/src/pages/SharedTripPage.test.tsx | 15 +++++++++++++++ client/src/pages/SharedTripPage.tsx | 6 ++++++ 2 files changed, 21 insertions(+) diff --git a/client/src/pages/SharedTripPage.test.tsx b/client/src/pages/SharedTripPage.test.tsx index 68efc409a..3ba5cc2f5 100644 --- a/client/src/pages/SharedTripPage.test.tsx +++ b/client/src/pages/SharedTripPage.test.tsx @@ -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('div[style*="linear-gradient(135deg"]'); + expect(header?.textContent).toContain('Shared Paris Trip'); + expect(header?.style.overflow).toBe('hidden'); + }); + }); }); diff --git a/client/src/pages/SharedTripPage.tsx b/client/src/pages/SharedTripPage.tsx index c9dadaf61..274db9aab 100644 --- a/client/src/pages/SharedTripPage.tsx +++ b/client/src/pages/SharedTripPage.tsx @@ -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 */} From 09e46bf7232497b72a1e3209b233cd6dcf5b1e07 Mon Sep 17 00:00:00 2001 From: Maurice Date: Tue, 15 Sep 2026 22:41:37 +0200 Subject: [PATCH 2/2] test(shared): give the header clip test an id of its own FE-PAGE-SHARED-040 already names the trip-wide marker colour case in the same file, so the new case moves to 042, and the comment above the clip says what it needs to in two lines. --- client/src/pages/SharedTripPage.test.tsx | 2 +- client/src/pages/SharedTripPage.tsx | 7 ++----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/client/src/pages/SharedTripPage.test.tsx b/client/src/pages/SharedTripPage.test.tsx index 3ba5cc2f5..287e9c18c 100644 --- a/client/src/pages/SharedTripPage.test.tsx +++ b/client/src/pages/SharedTripPage.test.tsx @@ -1453,7 +1453,7 @@ describe('SharedTripPage', () => { // ── #2345: the header has to clip the decoration it bleeds ────────────── - describe('FE-PAGE-SHARED-040: the header clips the circles it bleeds (#2345)', () => { + describe('FE-PAGE-SHARED-042: the header clips the circles it bleeds (#2345)', () => { it('does not let them widen the page', async () => { await open('overflow-token', payload({})); diff --git a/client/src/pages/SharedTripPage.tsx b/client/src/pages/SharedTripPage.tsx index 274db9aab..6d7ed778b 100644 --- a/client/src/pages/SharedTripPage.tsx +++ b/client/src/pages/SharedTripPage.tsx @@ -205,11 +205,8 @@ 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). + // The decoration circles bleed past this box on purpose; without the clip + // they widened the page by 60px on a phone (#2345). overflow: 'hidden', }} >