`Val` variants example

## What problem does this solve or what need does it fill?

We don't have an example that explains the `Val` variants in detail.

Also the `viewport_debug` example kind of sucks. It's just a sanity check thing I wrote in a couple of minutes and intended to replace but never got around to it. Some discussion here: https://github.com/bevyengine/bevy/pull/9666

## What solution would you like?

Maybe an example layout that can be adjusted using an interface. The interface could consist of some textboxes for the numeric values and buttons for the `Val` variants maybe.

Alternatively, the `viewport_debug` example could be expanded. Each node could be labelled with its assigned width and height `Val`s and a button could be implemented that when pressed cycles through the different coordinate representations that can be used: pixel, viewport and percentage.

Updating `viewport_debug` is probably easier. Both could be done also, it's not either/or.