shivaansh0610-LUFFY opened a new pull request, #619:
URL: https://github.com/apache/fineract-backoffice-ui/pull/619
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<!-- Commits must be signed to merge — see CONTRIBUTING.md#commit-signing if
you haven't set this up. -->
## What and why
Fixes #583 by improving the guided-tour experience when the highlighted
target is not near the default card position.
Previously, the guide card was always fixed to the bottom-right corner of
the viewport, regardless of the location of the active target. This change
makes the card follow the highlighted target and adds a visual scrim to make
the active step easier to identify.
### Changes
- Positions the guide card relative to the active target, trying **right →
left → below → above** based on available viewport space.
- Updates the card position during scrolling so it remains aligned with the
target, including during smooth-scroll animations.
- Falls back to the existing bottom-right position when no suitable
placement is available.
- Preserves the existing mobile behavior, where the guide card is displayed
as a bottom sheet.
- Adds a non-modal scrim around the highlighted target using four fixed
strips.
- Keeps the scrim `pointer-events: none` so the tour remains fully
interactive and non-modal.
- Does not modify the target element's `position` or `z-index`.
Closes #583
## Verification
- `npm run lint` ✅
- `prettier --check` ✅
- `npm run test:unit` — **1528/1535 passing**
- The 7 failing tests are pre-existing and unrelated to this change
(meetings, accounting, loans, and SPM modules).
- Reproduced the reported issue and verified the fix using a throwaway
Playwright setup with a mocked backend at **1440×900** in the dark theme.
- Verified that the guide card remains anchored to the active target while
scrolling.
- Verified that the scrim darkens the surrounding UI while leaving the
highlighted target unobstructed.
- Verified that the tour remains non-modal through `pointer-events: none`.
- Confirmed that mobile behavior remains unchanged.
## Screenshots
### Before
<img width="1440" height="900" alt="before-screenshot"
src="https://github.com/user-attachments/assets/017e5c40-8690-48c6-b040-2109b7e34a25";
/>
### After
<img width="1440" height="900" alt="after-screenshot"
src="https://github.com/user-attachments/assets/3e483ba5-44f3-4b0a-9fb4-4f9a80033622";
/>
### Before Change Video
[before-video.webm](https://github.com/user-attachments/assets/a4de0637-2b35-4eeb-be1b-6e666ee32dac)
### After Change Video
[after-video.webm](https://github.com/user-attachments/assets/5971bcf7-43a9-48bf-8084-d1c672087af3)
<!-- Attach before-screenshot.png, after-screenshot.png, before-video.webm,
and after-video.webm here. -->
## AI assistance (optional)
<!-- If generative AI materially assisted this contribution, optionally
state the tool or model and
the harness or workflow used. The contributor remains responsible for the
submitted change. -->
- Tool / model:
- Harness / workflow:
## Checklist
<!-- Check each item, or explain why it does not apply. -->
- [ ] I did not hand-edit generated files under `src/app/api/`.
- [ ] New component or service code uses the adapter boundary in
`src/app/core/adapters/` instead of direct browser globals or imperative
third-party APIs.
- [x] User-facing strings use translation keys.
- [ ] I added or updated tests appropriate to this change, or explained why
tests were not needed.
- [ ] UI workflow changes include suitable e2e coverage, including
real-backend testing where relevant.
- [ ] Commits are signed — see [Commit
Signing](CONTRIBUTING.md#commit-signing) in CONTRIBUTING.md.
- [x] I followed the [AI-assisted contributions
guidance](CONTRIBUTING.md#ai-assisted-contributions).
--
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]
