Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
UX/UI issue on small screens when adding roles
See original GitHub issueBug Description
Odd UX/UI on small screen sizes when you are adding roles on a site that has two admin users. The Who can manage view access title appears at the top, but the dropdown appears underneath the user roles. I was able to recreate on Android and iOS mobile phones.
See screencast.
https://app.asana.com/0/1202258919887896/1202406665934855/f
Steps to reproduce
On a mobile device:
- Go to ‘Dashboard sharing settings’
- Click on ‘Add User role’ for a module
- See issue as detailed above
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
Implementation Brief
Test Coverage
QA Brief
Changelog entry
I
Issue Analytics
- State:
- Created a year ago
- Comments:6
Top Results From Across the Web
Which screen size does your UI design need? | by Daris Ali Mufti
I am Daris Ali Mufti a UI UX Designer based in Jakarta Indonesia. Still a lot to learn! any insights, differing opinions, or...
Read more >Empty States – The Most Overlooked Aspect of UX - Toptal
It's easy to overlook empty states (or empty screens) in UX design because they occur infrequently and aren't always well understood. However, the...
Read more >8 App UX Design Mistakes In Navigation You Should Avoid
8 App UX Design Mistakes In Navigation You Should Avoid · Hidden Navigation Elements · Not Visible Enough · Unlabeled Icons · No...
Read more >Improve The Accessibility of Your Designs With ARIA
Adding ARIA roles to these custom UI elements would guarantee that assistive technologies would know how these elements should behave.
Read more >8 Principles of Screen Design in 2020 (with Examples)
Probably the most common question about UX is how to start screen design and what principles should we care about? Designing screens starts ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@tofumatt can I just clarify that you are clicking on the icon to assign a user role to the module as per screencast and steps to reproduce. That’s when the styling issue appears. From your screenshot, you are on the dashboard settings before you click the icon to select a user role.
I have tested this with iPhone 12 Pro and also Samsung S22. I am using Browser Stack but the same applies when using the Chrome responsive tool. Please confirm that you are clicking on the icon to view the issue. If you still do not see the issue then I will get some more information for you on dimensions.
@tofumatt the expected behaviour would be for the dropdown to appear at the side like it does with the inactive module, that said, I totally get your point of how complex of a change it could be when not many users are going to do this task on a mobile phone. It’s fine for tablets. I am happy to close this ticket. Thanks for looking into this. 👍