Improve Umami Demo's header layout and responsive behaviour

Accessibility note: If we have two header regions in the theme, they should both be inside the <header role="banner"> landmark region of the DOM. Something like this?

  {% if page.header_before|render|striptags|trim is not empty) or (page.header|render|striptags|trim is not empty) %}
    <header class="layout-header" role="banner">
      <div class="container">
        {% if page.header_before|render|striptags|trim is not empty %}
          {{ page.header_before }}
        {% endif %
        {% if page.header|render|striptags|trim is not empty %}
          {{ page.header }}
        {% endif %
      </div>
    </header>
  {% endif %

Tagging for a closer look later. I haven't tested it manually yet, but I took a quick look at the twig file in the patch. Confirming it follows the markup in #2.

This, to me, looks like a huge improvement on what we currently have. I even added some blocks in to the new 'pre_header' region, and guess what? nothing broke!!! Win.

I think Andrew or other a11y maintainers will have some accessibility issues, but I think it would be best to file those as follow-up issues (for example, I couldn't tab through the header on Safari (latest version on latest MacOS), but I think the improvements this patch gives us are worth the drawback where you can tab through the header but the focus order is all over the place. We can squash those a11y issues one-by-one then without people (newbies, for example) needing to be able to apply patches/etc before they can start contributing.

Also, there are other people working on header issues which are based on the legacy implementation we have, so if we move this to RTBC and commit it, then they can work from this much cleaner codebase - and, presumably, fix their issues quicker.

I did some manual testing of this, and it's great. It totally solves the problem of #2942043: Confusing visual focus order in Umami at wide breakpoint, so we can close that one as outdated once this is in.

Glad to see those flexbox order rules removed. That property has a big difference on the tabbing order between Firefox and WebKit/Blink browsers, so it's great whenever we can get layout right without resorting to flexbox order. It's also more robust for when evaluators try adding more blocks.

I agree with Mark that we should commit this before continuing with other header issues. They'll most likely need a re-roll as a result of this.

I couldn't tab through the header on Safari (latest version on latest MacOS

That sounds like it's down to Apple's ultra-daft system settings hurdle, where you have to turn on full keyboard navigation first. A number of years back they stopped the tab key working like it has always done in every other desktop browser on every OS since the web began, and then had the nerve to market the new setting as an advanced feature. I wouldn't worry about this - the markup looks good to me.

Crediting finnsky, who wrote a patch in the related issue at #2942043: Confusing visual focus order in Umami at wide breakpoint. We'll end up closing that as outdated once this is in.

Seems like a great improvement! 🙌 Committed 6254e18 and pushed to 8.7.x. Also chery-picked d222f79 and pushed to 8.6.x. Thanks!