To whoever decided to have that sidebar be a sidebar on portrait mobile layouts: 🤬

This wasn’t done very carefully or elegantly so I scope it to the same 600px break that the application CSS uses for something-or-other.

An instance admin can apply this in the admin CSS box without needing to change your running software.

Caveats

  • leaves a big ol’ gap at the top while things are loading, definitely fixable, I definitely haven’t bothered
  • you have to scroll all the way to the top to access anything since there is no clever float going on

CSS

@media screen and (max-width: 600px) {

.columns-area__panels {
  flex-direction: column;
}

.columns-area__panels__main {
    width: 100%;
    z-index: 1;
}

.columns-area__panels__pane--navigational {
  order: -1;
  width: 100%;
  min-height: 55px;
}

.columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
  width: 100%;
}

.navigation-panel hr { display: none;}

.navigation-panel {flex-direction: unset;}

}


/* This isn't mobile-related, but Mastodon 4 was leaving the links to original profile content on an empty profile unreachable, possibly because of the other stuff I have above, possibly because of font nonsense, so anyway here's that */

.empty-column-indicator {min-height: 10em;}