Simplify the display_and_visibility example

[cBournhonesque]

Objective

Address #9735 by removing the level of nesting and simplifying the example.
Also added some comments

fixes #9735

Solution

Use commands.entity(entity).add_child() instead of with_children in order to remove the level of nesting and to be able to work with loops.

TODO

I have two remaining problems with this PR that I wasn't able to fix (and i need help on them):

• the alignment of the squares on the left is wrong for some reason, I don't really get why
• the alignment of the last "visibility" button is wrong on the right unless I add an invisible NodeBundle (which was present in the original example)

[rparrett]

One thing I noticed while playing around this earlier was that the "panel container" nodes are seemingly redundant and could be replaced with a 10px white border on the "frame nodes"

[ickshonpe]

The invisible node is because I used JustifyContent::SpaceBetween to evenly distribute vertical space around the Visibility button. It could be done in other ways, maybe by nesting the two buttons together in another node.