Possible for time readout to overlap control pannel

[KatieWoe]

For phetsims/qa#519. Seen on iPadOS 14, but doesn't seem to happen with ?stringTest=double, just with the normal sim.
If the counter for the time an object has been orbiting gets long enough, it can start to overlap with the control panel. Choose the Earth/Satellite combo to test, as it gets longer faster.

[arouinfar]

The string can get pretty close on my device too (macOS 10.15/latest Chrome)

I think the reason the overlap doesn't occur on stringTest=double because the Clear button gets larger, moving its center to the left thereby moving the Earth Minutes string further left.

It seems like the maxWidth is probably a bit too large for the position of the button/string. We could either reduce the maxWidth by a few px or move the Clear button to the left by a few px. I don't really have a preference, so I'll leave it up to @samreid to decide.

[samreid]

@arouinfar while I'm here, what do you think about changing the number readout text to use the same font as the stopwatch, so the numbers don't jump around?

[arouinfar]

Sounds good to me @samreid. Please proceed.

[samreid]

I switched to a monospace font for the text, and that helped. Next I tried different maxWidth values for the button and the readout, but it didn't look great. I tried aligning to the right and that seemed nicer to me, and easy to make sure they don't overlap. It looks like this:

Is that an acceptable design? If so, please test it out thoroughly.

[arouinfar]

@samreid the alignment looks good. I tested it out in master, and the string position looks good. I'll leave this open since it should be verified by QA in the next round of testing.

[KatieWoe]

This seems fixed in rc.2