Pointer areas overlap

[KatieWoe]

Test device Dell Operating System Win 10 Browser Chrome Problem description For https://github.com/phetsims/qa/issues/711. On the third screen, slider thumb pointer areas overlap significantly with checkboxes bellow them in the component spacing section.

Visuals

Troubleshooting information:

!!!!! DO NOT EDIT !!!!! Name: ‪Fourier: Making Waves‬ URL: https://phet-dev.colorado.edu/html/fourier-making-waves/1.0.0-rc.1/phet/fourier-making-waves_all_phet.html?showPointerAreas Version: 1.0.0-rc.1 2021-09-28 15:44:23 UTC Features missing: applicationcache, applicationcache, touch Flags: pixelRatioScaling User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.61 Safari/537.36 Language: en-US Window: 1280x657 Pixel Ratio: 1.5/1 WebGL: WebGL 1.0 (OpenGL ES 2.0 Chromium) GLSL: WebGL GLSL ES 1.0 (OpenGL ES GLSL ES 1.0 Chromium) Vendor: WebKit (WebKit WebGL) Vertex: attribs: 16 varying: 30 uniform: 4096 Texture: size: 16384 imageUnits: 16 (vertex: 16, combined: 32) Max viewport: 32767x32767 OES_texture_float: true Dependencies JSON: {}

[pixelzoom]

I guess we must've moved the checkboxes into the panel after signing off on pointer areas - oops. This is similar to the problem that we had with pointer areas at the bottom of this control panel, see https://github.com/phetsims/fourier-making-waves/issues/124#issuecomment-904961377. I'll solve it the same way, and it will be a compromise -- see https://github.com/phetsims/fourier-making-waves/commit/bca5a99b8f9707b781b1cc89e1537a7f115441e8.

[pixelzoom]

Fixed in commits above, for master and 1.0. Screenshot below shows the revised pointer areas.

@arouinfar please review in master. If this looks OK, please label "fixed-awaiting-deploy".

[arouinfar]

Thanks @pixelzoom. The pointer areas look good in the screenshot, and all felt fine in master on my phone.

[pixelzoom]

Thanks @arouinfar.

Ready for verification in the next RC. To verify:

1. Run the sim with ?showPointerAreas
2. Go to the Wave Packet screen
3. Verify that pointer areas at the top of the control panel look like this:

[Nancy-Salpepi]

Yep. Looks the same.