[UX] Protected fields checkboxes are difficult to click on macOS

Overview

In browsers running on macOS, with default auto-hide/show scroll behavior set, clicking checkboxes of protected fields is very difficult. This problem only appears when the deck has a lot of templates (e.g. check 3c5dba9f-d831-4fc7-a1a4-e8074dafc4fa) and/or very long list of fields. This causes scrollbar to appear, covering checkboxes, as browser elements are always rendered with higher z-index.

Steps to replicate

To better illustrate the problem see the screenshot below. Essentially to check/uncheck the field you need to click the very small area between margin of the scrollbar and the left edge of the checkbox. Clicking in the middle of it either scrolls the view or does nothing (when scrollbar is hidden).

Solution

I think the solution could be very simple: add mr-3 class to checkbox containers, in addition to existing ml-3. As a quick workaround for now/test to see how it looks you can try: document.querySelectorAll('div[id$=-options] div.ml-3').forEach(el => el.classList.add('mr-3'))

1 Like

@ProductTeam

Thanks for the detailed report! We will look into it.