From 8352b1eef288206b845b6d745e7454ee84fdd871 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= Date: Wed, 11 Nov 2026 21:49:56 +0100 Subject: [PATCH] fix(onboarding): keep the tour card above the home indicator On a phone the tour falls back to a card at the bottom edge, 8 px above it, so in the installed app its Next and Skip row sat inside the home indicator strip. The card now adds the bottom safe area, as the bottom bar and the sheets do. --- src/__tests__/pwa-mobile-shell-guard.test.ts | 8 ++++++++ src/components/onboarding/tour.tsx | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/__tests__/pwa-mobile-shell-guard.test.ts b/src/__tests__/pwa-mobile-shell-guard.test.ts index f68bba020..89f6eebbb 100644 --- a/src/__tests__/pwa-mobile-shell-guard.test.ts +++ b/src/__tests__/pwa-mobile-shell-guard.test.ts @@ -139,6 +139,14 @@ describe("the shell owns the safe area", () => { expect(grid).toMatch(/\boverscroll-contain\b/); }); + it("the onboarding tour's bottom card clears the home indicator", () => { + const tour = code(read("src/components/onboarding/tour.tsx")); + const card = tour.match(/"[^"]*absolute inset-x-2 [^"]*"/)?.[0] ?? ""; + expect(card).toMatch( + /\bbottom-\[calc\(env\(safe-area-inset-bottom,0px\)\+0\.5rem\)\]/, + ); + }); + it("the sheet primitives name their side for those rules", () => { expect(read("src/components/ui/sheet.tsx")).toMatch( /data-sheet-side=\{side\}/, diff --git a/src/components/onboarding/tour.tsx b/src/components/onboarding/tour.tsx index d78383eff..1fc18485d 100644 --- a/src/components/onboarding/tour.tsx +++ b/src/components/onboarding/tour.tsx @@ -706,7 +706,7 @@ export function OnboardingTour({ // centred above the bottom edge on wide ones (`mx-auto` + // `max-w`). Used on EVERY viewport when no anchored // placement keeps the footer buttons inside the viewport. - "bg-card border-border pointer-events-auto absolute inset-x-2 bottom-2 mx-auto max-h-[70vh] max-w-[22rem] overflow-x-hidden overflow-y-auto rounded-xl border p-4 shadow-2xl md:p-6" + "bg-card border-border pointer-events-auto absolute inset-x-2 bottom-[calc(env(safe-area-inset-bottom,0px)+0.5rem)] mx-auto max-h-[70vh] max-w-[22rem] overflow-x-hidden overflow-y-auto rounded-xl border p-4 shadow-2xl md:p-6" : "bg-card border-border pointer-events-auto absolute max-w-[22rem] overflow-x-hidden overflow-y-auto rounded-xl border p-4 shadow-2xl md:p-6" } style={