Addons-frontend: The 'Featured add-ons only' check box is hardly visible and doesn't always respond to tapping

[ioanarusiczki]

Steps to reproduce:

1.Access the AMO homepage on your mobile device.
2.Tap on "Find add-ons" and enter a valid term that would return results.
3.Open the Filter results and try to tap on the Featured add-ons only check box.

Expected result:
The check box is selected and the list of search results is renewed.

Actual result:
The check box is unresponsive.

Notes:
When the screen is zoomed in the check box responds to tapping.
Reproduced on all AMO servers with FF57(Android 8.0).

[muffinresearch]

We should check to see the size of the click target and make sure it's sufficient and see if that improves the tapability.

[wagnerand]

Mentor: @kumar303

If this is your first contribution, please refer to https://wiki.mozilla.org/Add-ons/Contribute/Code on how to get started.

[SeanPrashad]

Hey guys,

I tried to replicate this bug however it seems that the Featured add-ons only checkbox has been improved since this bug was opened. See below:

Notice that the border has a darker outline and responds quite well to touch (_without the need to zoom in_):

Portrait:

Landscape:

[tofumatt]

I think the click target of the checkbox (especially on small/mobile/touch screens) should still be larger and there should be more padding around it that allows for clicking. I think this bug is still valid.

[caitmuenster]

Hey @SeanPrashad, were you able to replicate this?

[SeanPrashad]

Hey @caitmuenster! I was able to replicate it and put together a proposal for a solution which will hopefully get us started somewhere:

Vertical landscape:

Horizontal landscape:

I'll open a PR shortly for review!

[ioanarusiczki]

Verified fixed on AMO dev with FF59 (Android 8.0.0)