Open the capture sheet from the dashboard's add button on phones

On the phone shell the header's 'Add' opened a dropdown while the plus
in the bottom nav, one thumb below, opened the capture sheet. The header
button now opens the same sheet there; the desktop rail keeps the
dropdown. The onboarding tour anchors on whichever of the two is laid
out.
This commit is contained in:
Marc-André Bombeck committed 2026-10-08 18:36:46 +02:00
1 parent b53782810f
commit 6ca33882f1
3 files changed
+51 -14

No files matched your search

+18 -8
View File
@@ -102,12 +102,26 @@ interface SpotlightRect {
* not in the DOM or has zero dimensions — caller renders a centred
* tooltip in that case.
*/
/**
* The rendered element carrying a tour id. A control can exist twice with the
* same id, one per shell (the dashboard's add button is a dropdown on the
* desktop rail and a sheet trigger on the phone shell), with the other one
* hidden; the stop anchors on the one that is actually laid out.
*/
function findTourTarget(targetId: string): HTMLElement | null {
const all = document.querySelectorAll<HTMLElement>(
`[data-tour-id="${CSS.escape(targetId)}"]`,
);
for (const el of all) {
if (el.getClientRects().length > 0) return el;
}
return all[0] ?? null;
}
function measureTarget(targetId: string | null): SpotlightRect | null {
if (!targetId) return null;
if (typeof document === "undefined") return null;
const el = document.querySelector<HTMLElement>(
`[data-tour-id="${CSS.escape(targetId)}"]`,
);
const el = findTourTarget(targetId);
if (!el) return null;
const rect = el.getBoundingClientRect();
if (rect.width === 0 || rect.height === 0) return null;
@@ -356,11 +370,7 @@ export function OnboardingTour({
const MAX_ATTEMPTS = 40;
const settleAndMeasure = () => {
if (cancelled) return;
const el = stop.targetId
? document.querySelector<HTMLElement>(
`[data-tour-id="${CSS.escape(stop.targetId)}"]`,
)
: null;
const el = stop.targetId ? findTourTarget(stop.targetId) : null;
if (el) {
// Bring the anchor into view BEFORE measuring — anchors below the
// fold positioned the popover under the viewport bottom otherwise.