Compare boxes are too small to organize 15 or more objects

[KatieWoe]

Test device
Dell
Operating System
Win 11
Browser
Chrome
Problem description
For phetsims/qa#771. Occurs on Compare screen but not the Twenty screen.
When you organize a group larger than 14 objects, the object on the left on the bottom row overlaps with the origin box and it is removed.

Steps to reproduce

1. Remove all the objects in one of the boxes on the Compare screen
2. Hit that box's organize button

Visuals

Troubleshooting information:

!!!!! DO NOT EDIT !!!!!
Name: ‪Number Play‬
URL: https://phet-dev.colorado.edu/html/number-play/1.0.0-dev.45/phet/number-play_all_phet.html?screens=1,2,3
Version: 1.0.0-dev.45 2022-01-31 11:53:19 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/97.0.4692.99 Safari/537.36
Language: en-US
Window: 1280x649
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: {}

[chrisklus]

Thanks @KatieWoe! I forgot that these being shorter because of the text would not allow for 20 to fit like it does on the Twenty screen. Co-assigning @amanda-phet for brainstorming the design to fix this.

[chrisklus]

We'd like to try shrinking the total accordion boxes down to get the lower accordion boxes to match the height of the twenty screen's. The total text height might be around 80px.

[amanda-phet]

@chrisklus do you want to add the purple and orange background colors to the total accordion boxes when you make this fix?

[chrisklus]

@amanda-phet changes complete, ready for review on phettest.

[chrisklus]

Form design meeting: we like these changes. Closing.