Doc update for a space saving display.

[rouilj]

The following css seems to work to produce a more space-conserving display than the default.

I suggest using it for desktop (or lack of touch screen) displays as it puts multiple items on a single line which makes swiping to delete difficult.

The css changes change the direction to row and add wrapping. This causes the label and the
submit button to be squished inline. So we make the first and last children grow, never sharing
and 100% wide. For chrome setting the flex-basis seems to be needed.

.demo > div > form {
  /* flex-direction: column; */
  flex-direction: row;
  flex-wrap: wrap;
  flex-basis: fit-content;
}

.demo > div > form :is(:first-child, :last-child) {
  flex: 0 1 100%;
}

Example screenshots. Before:

After:

Note that I had to zoom out to 70% or so in firefox before the content was small enough to move side by side.

Also I had some wierdness for some of the items. It looks like you are applying styles on each item directly
rather than inserting a style sheet and targeting the selected items by class. Some of the items have an 8px
height (purple tentacle and later) and some had a 19 px height according to devtools. You can see the
transition in the second row. Very odd. Chrome was doing something similar. If I start by selecting 3 or 4
items then apply the changes items I select after that have different sizes.

However another attempt at editing the style in devtools didn't result in differing height style settings. So I'm confused as to what is happening.

Also adding styles directly I think will work even if there is a CSP defined, but it would be better if they
were defined in an injected style block. Does the --SSS-x custom property get changed when touch gestures are used?

Thoughts?