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

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

.d-header {
  height: 3.66em;

  .title {
    --d-logo-height: 2.4em;
  }

  #site-text-logo {
    font-size: var(--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: var(--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 {
    .before-header-panel-outlet,
    .header-buttons,
    .d-header-icons {
      display: none;
    }
  }
  // Fade in header avatar + icons if topic title is not visible in mobile header
  .panel .icons {
    animation: fadein 0.5s;
    @media (prefers-reduced-motion) {
      animation-duration: 0s;
    }
  }
  // A rendering bug in safari causes header SVGs to jitter after animations.
  // translateZ() forces gpu rendering which fixes the issue.
  .d-header-icons {
    transform: translateZ(0);
  }
}

.d-header-icons {
  .d-icon {
    line-height: var(--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);
  }
}