hotwax
Scrollbar margin issue in cycle count review
Description: The scroll bar on the Cycle Count Review screen has a narrow margin between the checkboxes, making it difficult for users to interact with one without accidentally triggering the other.
Steps to Reproduce:
- Navigate to the Cycle Count Review screen.
- Attempt to check/uncheck a checkbox near the scroll bar.
- Notice that interacting with one element often catches the other.
Expected Behavior: There should be a wider margin between the checkboxes and the scroll bar to ensure smooth user interaction.
Proposed Solution: Increase the spacing between the checkboxes and the scroll bar to prevent accidental interactions.
I believe there is a way to detect if the users browser has scrollbar always visible or if it is visible on scroll. The styling we add should only apply to users when their browser has scroll bar visible on scroll.
The implementation should be to add padding to the item overall instead of just the checkbox.
@dt2patel Sir,
Explored around the possible ways to detect scroll visibility in case of overlay scrollbars, but didn't found anything promising. https://issues.chromium.org/issues/41089158 https://css-tricks.com/designing-show-scroll-bars/
One solution is to use capacitor plugin for getting device preference and then add the specific styling(need to check the specific plugin to be used for getting scrollbar preference).
@dt2patel Sir, need to discuss on this as well. As per Ajinkya this is on priority.
@ymaheshwari1 agreed that there is no way simple way that I was thinking of to detect scrollbar presence. Instead lets just add a static padding to the end to the list item css class for desktop view.
@dt2patel sir,
Are we adding this padding in the global apps theme repo or just in our app locally.
