Skip to content

fix(settings): align guided tour highlights with dialog rows - #2369

Open
jonathanwxh-cell wants to merge 1 commit into
cboard-org:masterfrom
jonathanwxh-cell:fix/settings-tour-positioning
Open

jonathanwxh-cell wants to merge 1 commit into
cboard-org:masterfrom
jonathanwxh-cell:fix/settings-tour-positioning

Conversation

@jonathanwxh-cell

@jonathanwxh-cell jonathanwxh-cell commented Oct 16, 2026 •

Copy link
Copy Markdown

Fixes #2364.

The Settings tour can highlight the app bar instead of the setting it describes. On the original code, the Language target was at y=229 while its spotlight started at y=4. Joyride measures offsets differently for targets inside a fixed, scrolling dialog; the inner target div was positioned relative to its row/list rather than the dialog.

Move each target ID onto the complete setting row and keep the Settings lists out of the offset-parent chain. Preserve the dialog scroll container and replace the 500px scroll offset with 20px. Start the tour after the dialog's entrance transition finishes so a fresh visit cannot calculate scrolling from a moving target.

Add browser regression coverage for all seven setting targets in English, Spanish, and Arabic/RTL, in light and dark themes. The checks compare spotlight/row geometry, require the whole target and tooltip to be visible, check the tour images, and verify completion/dismissal persistence and help-button restart. PLAYWRIGHT_BASE_URL allows testing the local branch instead of the default QA deployment.

Validation on Node 22.23.2:

  • The geometry regression failed on the original code with a 221px error.
  • All 12 Chromium desktop/mobile-emulation cases pass on the fix, with no Joyride warnings/errors detected.
  • Production build and service-worker generation pass.
  • CircleCI on commit 609e41a: all 62 selected suites, 434 tests, and 65 snapshots pass; its full formatting check passes too. Codacy and Snyk checks pass.
  • Final local affected unit tests: 12 suites, 23 tests, and 17 snapshots pass (Settings and FullScreenDialog). One broader local rerun stalled and was stopped; CircleCI subsequently completed the full selected suite successfully on the submitted commit.
  • Changed files pass Prettier and git diff --check; the commit hook also passed.

For a local browser run, start the app on port 3100, then run:

PLAYWRIGHT_BASE_URL=http://127.0.0.1:3100 npx playwright test tests/unlogged/settings/tour.spec.js --project=chromium --project=mobile --workers=1

Other-tour checks: stepped through the root-board, unlocked-board, communicator-builder, and symbol-search tours. The Communicator spotlight problem also reproduces on the public production app and is reported separately in #2368. I found no Joyride tour in the current Analytics implementation.

Limits: Firefox was attempted but its downloaded executable cannot start on this Windows machine (side-by-side configuration error). Packaged Android/Cordova and physical mobile devices were not tested. Web tour images loaded in all tested language/theme combinations.

Asked about existing ownership and the preferred approach in #2364 before preparing the patch. Ready for maintainer review; additional Firefox and packaged Android verification would be welcome.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Settings tour with errors in the tooltips and highlights that point to wrong elements

1 participant