Prevent accidental miss-clicks outside multi-select checkboxes

[acelaya]

This is an alternative PR to #1700

We have experienced (and more people has reported) that it is easy to miss-click outside a checkbox on a MultiSelect option. This is problematic, because clicking on a checkbox appends/removes the item to the selection, but clicking outside of it is captured as a click on the main option's body, causing the whole selection to be replaced with just that option.

multi-select-current-2024-09-06_11.00.31.mp4

This PR changes that behavior, so that clicking on "the surroundings" of the checkbox behaves as clicking the checkbox itself.

"The surroundings" in this case means anywhere inside the right side of the option, matching the option's padding. That way the checkbox is always clicked if you click anywhere on the "right" side of an option.

This shows how it behaves with these changes:

multi-select-fixed-2024-09-06_11.13.12.mp4

Note

This PR is easier to review ignoring whitespaces

Test steps

1. Check out this PR
2. Start dev server via make dev.
3. Go to http://localhost:4001/input-select
4. Scroll to the very bottom, where the multi-select is demoed, and verify you can click close to the checkbox, anywhere in the option, and it still acts as if the checkbox was clicked.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (703add7) to head (d0f25ca).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #1704   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           66        66           
  Lines         1115      1121    +6     
  Branches       435       439    +4     
=========================================
+ Hits          1115      1121    +6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[acelaya]

@marcospri a similar PR, #1700, was already reviewed by Rob.

This is almost the same, but with a slightly less hacky approach, so you can do a high level review. No need to go too deep in the details.

[marcospri]

This looks very sensible 👍