On larger screens, the onboarding dialog is positioned off to the side with the arrow on the left side of the popover, anchoring to the bookmark element. The placement option for the Popover is set to "bottom-start" which causes this behavior.
"bottom-end" for the placement would place the arrow on the right side of the popover (for LTR) languages.
With this change:
Requirement
Scope: Desktop web (Vector 2022).
- Adjust the placement of the Reading List onboarding dialog to improve alignment on larger screens.
- Update the popover placement from "bottom-start" to "bottom-end" for LTR languages so that:
- The arrow anchors to the right side of the popover, aligning correctly with the bookmark icon.
- The dialog appears closer and visually aligned with the bookmark element.
- Ensure RTL languages mirror the placement appropriately (use "bottom-start" for RTL).
- The dialog must remain responsive and properly aligned across all viewport widths.
BDD
Feature: Improve placement of onboarding dialog on large screens
Scenario: Onboarding dialog alignment for LTR languages
Given I am using Vector 2022 on a large screen with LTR language (e.g., English)
When the onboarding dialog appears
Then the popover arrow anchors on the right side
And the dialog is positioned correctly near the bookmark icon
Scenario: Onboarding dialog alignment for RTL languages
Given I am using Vector 2022 on a large screen with RTL language (e.g., Arabic)
When the onboarding dialog appears
Then the popover arrow anchors on the left side
And the dialog remains properly aligned with the bookmark iconTest Steps
Test Case 1: Verify onboarding dialog placement in LTR
- Log in with Reading Lists enabled.
- Load an article with the Save (bookmark) icon visible on a large screen.
- Trigger the onboarding dialog to appear.
- AC1: The popover arrow appears on the right side of the dialog (placement = "bottom-end").
- AC2: The dialog aligns correctly with the bookmark icon and does not appear off to the side.
Test Case 2: Verify onboarding dialog placement in RTL
- Switch interface language to an RTL language (e.g., Arabic or Hebrew).
- Reload the article page and trigger the onboarding dialog.
- AC3: The popover arrow appears on the left side of the dialog (placement = "bottom-start").
- AC4: The dialog aligns properly with the bookmark icon and maintains correct spacing.
QA Results - Beta
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T407915#11325990 |
| 2 | ✅ | T407915#11325990 |
| 3 | ✅ | T407915#11325990 |
| 4 | ✅ | T407915#11325990 |
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T407915#11325996 |
| 2 | ✅ | T407915#11325996 |
| 3 | ✅ | T407915#11325996 |
| 4 | ✅ | T407915#11325996 |
