Fix #4878: Responsive alignment and touch support for welcome tour #4879
Conversation
|
❌ Some Jest tests failed. Please check the logs and fix the issues before merging. Failed Tests: |
|
Desktop version bug Mobile version bug can you please rectify this bug that this PR has introduced and test it properly. |
|
❌ Some Jest tests failed. Please check the logs and fix the issues before merging. Failed Tests: |
1 similar comment
|
❌ Some Jest tests failed. Please check the logs and fix the issues before merging. Failed Tests: |
|
Thank you for catching that alignment issue! I investigated it and found two causes: JS Conflict: There was a hardcoded top: 10px inside js/widgets/help.js that was overriding the CSS and forcing the arrows to the top on mobile. CSS Rigidity: The CSS used a fixed top: 195px, which looked correct on my laptop but was too high for shorter mobile screens. The Fix: I removed the hardcoded pixel values in both the JS and CSS files. I updated the alignment logic to use top: 50% and transform: translateY(-50%). Verification: I have verified this on the 474px x 749px resolution (from your screenshot), and the arrows are now perfectly centered vertically. They also remain centered on standard desktop views. |
|
❌ Some Jest tests failed. Please check the logs and fix the issues before merging. Failed Tests: |
|
Update: I've also addressed the horizontal overlap on the Desktop view. I noticed in your screenshot that the arrows were touching the border. I increased the side margins from 5px to 20px in js/widgets/help.js, so they now have proper spacing on the 'Meet Mr. Mouse' popup while remaining visible on mobile. |
|
ill check |
still the same?
|
|
Still something wrong on the desktop: |
|
Acknowledged. I'm currently stuck trying to find a CSS solution that handles the alignment correctly on both mobile and desktop without them conflicting. I will update the PR once I find a way to separate the styles cleanly. |
Inuth0603
force-pushed
the
fix-ui-final-clean
branch
from
bb5ac4e to
15021e4
Compare
|
✅ All Jest tests passed! This PR is ready to merge. |
|
@walterbender I have updated the PR to resolve the layout conflicts on both devices. The Fix: Mobile: The Welcome modal is now perfectly centered, and the arrows are vertically aligned and visible. Desktop: Added a @media query to apply specific margins (20px) so the arrows no longer touch the screen edges. I verified this locally on both mobile simulation and full desktop view. Ready for review! |
3 participants
This PR resolves the UI regression on the "Take a Tour" landing page reported in #4878.
Centered tour arrows and improved z-index for mobile responsiveness.
Closes #4878