I have this issue everytime I grocery shop as well, would be great if “lock mode” prevented that from happening! Unfortunately Kenneth’s solution isn’t ideal for my needs, as I like to zoom-in and drag items around using the bullet point when not in “lock mode”.
It looks like they toggle editability of all content elements when you toggle the lock, so there’s no CSS selector that can be used to selectively disable pointer events only when it’s a checkbox and in lock mode. It would look something like the following (note that .lock-mode
does not actually exist…):
/*
* Disable bullet click triggering zoom for checkbox items on
* mobile when in lock mode.
*/
.is-mobile .lock-mode .Node.has-checkbox .Node-bullet {
pointer-events: none;
}
As a hacky fix, I decided to add more left-margin to the checkbox so that it shifts it over to the right and makes it harder to accidentally press the bullet.
/*
* Shift checkbox over to the right on mobile.
*
* Makes it harder to accidentally click on zoom-in bullet.
*/
.is-mobile .Node:not(.is-currentRoot) .Node-checkbox {
margin-left: 8px;
margin-right: -16px;
}
.is-mobile .Node.has-checkbox .Node-contentContainer {
margin-left: 18px;
margin-right: -14px;
}