here is a rather hacky way to do it (in common/css, NOT /mobile/css)

@use "lib/viewport";

@include viewport.until(md) {
  .d-header:not(:has(.extra-info-wrapper.topic-info-visible)):not(:has(.extra-info-wrapper .topic-link)):not(.header-topic-info-visible) .title {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      margin: 0;
  }
}

there is probably a more elegant way but the header bar is challenging to change things like placement and order of items, (thus i won’t do a PR). Also this component is still using the deprecated /mobile folder path and needs to be updated to viewport adjusted code.

2 Likes

apologies, I haven’t gotten around to keeping this component exactly up to date, but yes, the move away from mobile/desktop views definitely broke some of the assumptions the original theme component made.

@Lilly thanks for the nudge forward on this, position absolute would do the trick in the time being… the reordering of items on the component here is just doing a simple CSS grid solution instead

2 Likes

Hey everyone just following up, Lilly did a bunch of work in cleaning this up and getting this up to date - I just merged her changes so this should be good to go now

3 Likes