I want to make sure the heading levels are in document outline order

[stacyk]

On small screens we are showing more headings that aren't visually necessary when on a taller screen. What options can we consider to make sure the structure makes sense regardless of what size screen you are on.

The conversation started in #137 (comment) and is posted below:

stacyk on Nov 13
This only displays at small sizes, and I think it makes sense as an h2 (especially since the other "background Color" is a label and not a heading) but it is a bit weird then to have 2-3 groups of colors formats at the same heading level underneath when they should likely be <h3> but this <h2> doesn't display at larger screen sizes so Im not sure whats the better way to handle this? Maybe this isn't a heading at all and just a span with a class that makes it look like a heading?

@mirisuzanne mirisuzanne last month
I agree this is a strange situation – mainly caused by the back-and-forth background/foregroud/background/foreground source order. I wonder if we should rethink it at that level? Like what if we collapsed the format lists on mobile into a details/summary that stays connected to the correct field? Then these headings aren't needed.