Grid is in front of atoms and line

[KatieWoe]

Test device:
Dell Laptop
Operating System:
Win 10
Browser:
chrome
Problem description:
For phetsims/qa#216. Present in the published version, but unintended per @jbphet. Also present in States of Matter under similar circumstances. When examining the graph the point representing the movable atom seems to be layered behind the grid. This also seems to be the case for the red line.
Steps to reproduce:

1. Set to projector mode (easier to see effect)
2. Set so that movable atom is Neon (easier to see)
3. Pause the sim
4. Drag atom until it overlaps with one or more grid lines

Screenshots:

Troubleshooting information (do not edit):

Name: ‪Atomic Interactions‬
URL: https://phet-dev.colorado.edu/html/atomic-interactions/1.1.0-rc.1/phet/atomic-interactions_en_phet.html
Version: 1.1.0-rc.1 2018-11-05 21:18:48 UTC
Features missing: touch
Flags: pixelRatioScaling
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/70.0.3538.110 Safari/537.36
Language: en-US
Window: 1536x683
Pixel Ratio: 2.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: 16384x16384
OES_texture_float: true
Dependencies JSON: {"assert":{"sha":"928741cf","branch":"HEAD"},"atomic-interactions":{"sha":"15bb3a2d","branch":"HEAD"},"axon":{"sha":"d7ba44e2","branch":"HEAD"},"brand":{"sha":"89d28f63","branch":"HEAD"},"chipper":{"sha":"bbbb514a","branch":"HEAD"},"dot":{"sha":"820111c8","branch":"HEAD"},"joist":{"sha":"749f10ff","branch":"HEAD"},"kite":{"sha":"59755f7e","branch":"HEAD"},"nitroglycerin":{"sha":"ccaab9cd","branch":"HEAD"},"phet-core":{"sha":"68a89cc4","branch":"HEAD"},"phet-io":{"sha":"364077cf","branch":"HEAD"},"phet-io-wrapper-classroom-activity":{"sha":"abc4ae3e","branch":"HEAD"},"phet-io-wrapper-hookes-law-energy":{"sha":"429886e7","branch":"HEAD"},"phet-io-wrapper-lab-book":{"sha":"ef0b0b0c","branch":"HEAD"},"phet-io-wrappers":{"sha":"7ec1a04a","branch":"HEAD"},"phetcommon":{"sha":"22b158d0","branch":"HEAD"},"query-string-machine":{"sha":"c2e502fb","branch":"HEAD"},"scenery":{"sha":"415371c3","branch":"HEAD"},"scenery-phet":{"sha":"94b92879","branch":"HEAD"},"sherpa":{"sha":"a9fd066b","branch":"HEAD"},"states-of-matter":{"sha":"d6317e0b","branch":"HEAD"},"sun":{"sha":"3086e97a","branch":"HEAD"},"tambo":{"sha":"0e5b9133","branch":"HEAD"},"tandem":{"sha":"a2348c0c","branch":"HEAD"}}

[arouinfar]

The z-ordering of the grid is indeed a bit funky @KatieWoe. I would move the grid to the back, but the relative z-ordering of everything else looks fine to me @jbphet.

[jbphet]

Unassigning until this sim comes back to my list of top priorities.

[SaurabhTotey]

I believe I have addressed this issue now. Now the grid lines are at the very back but the relative ordering of everything else is the same.

[SaurabhTotey]

Removing status:ready-for-review label and assigning to @arouinfar to review.

[arouinfar]

Looks good in master @SaurabhTotey.

[SaurabhTotey]

Marking this as status:fixed-awaiting-deploy.

[SaurabhTotey]

Tested on deployed version. Closing.