discourse/app/assets/stylesheets/mobile/header.scss

// --------------------------------------------------
// Discourse header
// --------------------------------------------------

.d-header {
  height: 3.66em;

  // some protection for text-only site titles
  .title {
    max-width: 75%;
    @include ellipsis;
    -webkit-animation: fadein 0.5s;
    animation: fadein 0.5s;
    // This acts as a placeholder if for some reason the small logo takes a while
    // to load - prevents topic title from shifting after the small logo loads.
    // It's hardcoded to 36px because that's the width we use inline for the small
    // logo in the home-logo widget.
    min-width: 36px;
    a {
      display: block;
      width: 100%;
    }
  }

  #site-logo {
    max-height: 2.4em;
    max-width: 100%;
  }
  #site-text-logo {
    margin: 0;
    font-size: $font-up-1;
  }
  .extra-info-wrapper {
    .extra-info {
      // header title should not be centered if there's no tags / categories
      &:not(.two-rows) {
        min-height: 2.25em;
      }
      .header-title {
        font-size: $font-0;
        // the margin-bottom here is fragile, changing it can cause tag alignment issues
        margin: 0 0 0.35em 0;
        .archetype-private_message & {
          // PMs might have participant avatars in the header
          margin: 0 0 0.15em 0;
        }
      }
      .private-message-glyph-wrapper {
        float: left;
      }
    }
  }
  button.sign-up-button {
    display: none;
  }

  // Hide header avatar + icons while topic title is visible in mobile header
  .extra-info-wrapper + .panel {
    .header-buttons,
    .d-header-icons {
      display: none;
    }
  }
  // Fade in header avatar + icons if topic title is not visible in mobile header
  .panel {
    animation: fadein 0.5s;
  }
  // A rendering bug in safari causes header SVGs to jitter after animations.
  // translateZ() forces gpu rendering which fixes the issue.
  .d-header-icons {
    -webkit-transform: translateZ(0);
  }
}

.d-header-icons {
  .d-icon {
    line-height: $line-height-medium;
  }
  .active .icon {
    &:after {
      margin-top: -1px;
    }
  }
}

#main-outlet {
  @media only screen and (orientation: landscape) {
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
  }
}