Aman-Mittal opened a new issue, #583: URL: https://github.com/apache/fineract-backoffice-ui/issues/583
Filing as an enhancement, not a defect: the bottom-right placement is a deliberate choice and `guidance-tour.component.ts` documents the reasoning behind it, including measurements of the card covering its own subject. This is about what that choice costs on a wide screen. > **Screenshot:** _Clients tour, step 3 of 3 — the card bottom-right, the highlighted `+ CREATE CLIENT` button top-left._ (attached below) ## First, what is working I ran the tour to completion on Dashboard, Clients, Loans, Groups, Centres, Products, Accounting and Reporting. On every step: - the target selector resolved, - no step highlighted a zero-size element, - every highlight was inside the viewport, - no step showed an untranslated key. The defensive work recorded in the `HEADER_ACTIONS_SELECTOR` and `TAB_GROUP_SELECTOR` comments is holding — no step pointed at nothing. ## The distance `app-guidance-tour.active` is `position: fixed; bottom: 24px; right: 24px` (`guidance-tour.component.ts:140-142`), so the card stays in the corner while the target is wherever it is. Measured gap between the card's top edge and its highlight, at 1440x900: | Screen | Step | Card top | Highlight top | Gap | |---|---|---|---|---| | Clients | Register Client | 708 | 120 | **588 px** | | Clients | Search and Filtering | 708 | 156 | 552 px | | Groups | Creating a group | 687 | 120 | 567 px | | Centres | Creating a centre | 687 | 120 | 567 px | | Products | Adding a record | 687 | 152 | 535 px | | Accounting | Adding a record | 687 | 152 | 535 px | | Reporting | Moving through the list | 708 | 515 | 193 px | On the Clients "Register Client" step the card is in the bottom-right corner and the button it describes is in the top-left — opposite corners of the screen. `scrollTargetIntoView` cannot help when the target is already near the top of a short page. ## Nothing is dimmed `body.guidance-active` only adds `padding-bottom` to the content area; there is no scrim. So a 3 px outline plus an 18% tint (`guidance-tour.component.ts:234-245`) has to hold attention against a fully-lit data table. In the screenshot the outlined button reads as less prominent than the table rows beside it, and the card itself covers the `Office` column and part of two rows. ## Suggestions - **Anchor the card near its target on wide screens** — beside or beneath the highlight, flipping side when it would overflow, falling back to the corner only for steps with no target. The 320 px `padding-bottom` already reserves room to scroll the target clear, so the machinery is mostly there. - **Add a scrim** while a tour is running — a dim over everything except the highlighted element. That is what makes coach-marks readable, and it would let the outline be subtler rather than louder. - Keep the mobile bottom-sheet exactly as it is; the comments explain why it exists and it works. A connector line between card and target would be a cheaper alternative to re-anchoring, if the placement logic looks like more than this is worth. ## Reproduction 1. Sign in at 1440x900, go to **Clients**. 2. Click **Guide**, then **Next** twice to reach "Register Client" (step 3 of 3). 3. The highlighted button is top-left; the card is bottom-right; the page behind is undimmed. ## Tested against Deployed build of `main`, Chrome, 1440x900. Line references are against `27d5a441`. -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
