zulip/web/styles/message_view_header.css

#message_view_header {
    color: var(--color-text-message-view-header);
    z-index: 2;
    float: left;
    height: var(--header-height);
    width: 100%;
    line-height: var(--header-height);
    display: flex;
    align-items: baseline;
    white-space: nowrap;
    cursor: default;

    .hidden {
        display: none;
    }

    /* TODO: Remove the `.navbar_title` span from the `message_view_header.hbs`
       template. That span predates the use of flexbox, and makes it so that
       elements like the `.narrow_description` have different line-height and
       sizing contexts depending on whether it's a view or a narrow being shown. */

    .message-header-stream-settings-button,
    .navbar_title {
        font-weight: 600;
        /* 16px at 14px em */
        font-size: 1.1429em;
        padding: 0 2px 0 6px;
        overflow: hidden;
        text-overflow: ellipsis;
        color: inherit;
        text-decoration: none;
        /* Create a flex container for the icon and
           stream name. */
        display: flex;
        /* We want to use baseline alignment so that the
           stream name and narrow description sit on
           the same invisible line. */
        align-items: baseline;

        .zulip-icon {
            /* 14px at 16px em, inherited from .navbar_title */
            font-size: 0.875em;
            /* Pull the icon out of baseline alignment,
               and center with stream name. */
            align-self: center;
        }

        .zulip-icon-inbox {
            /* 16px at 16px em, inherited from .navbar_title */
            font-size: 1em;
        }

        .fa-envelope {
            /* The squatter envelope icon appears
               better vertically centered when aligned
               to the baseline of the adjacent DM partners. */
            align-self: baseline;
        }

        @media (height < $short_navbar_cutoff_height) {
            padding: 0 3.5px; /* based on having ~41.66% decrease */
        }

        & i {
            margin: 0 6px 0 5px;
            /* Align all icons to center. */
            align-self: center;
        }

        .fa {
            .fa-envelope {
                /* 14px at 16px em, inherited from .navbar_title */
                font-size: 0.875em;
                margin: 0 5px;
            }
        }

        .narrow_description {
            /* 14px at 16px em, inherited from .navbar_title */
            font-size: 0.875em;
        }
    }

    .message-header-navbar-title {
        /* Allow long navbar titles (e.g., stream names) to collapse. */
        flex: 0 1 auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .narrow_description {
        /* the actual value of flex shrink does not matter, it is the
           ratio of this value to other flex items that determines the
           behavior while shrinking, here the other item has the .stream
           class and a flex of 1, so the value here *is* the ratio, and
           is chosen such that the narrow description shrinks to close
           before the stream name must begin to shrink */
        flex-shrink: 100;
        background: none;
        /* 14px at 14px em */
        font-size: 1em;
        color: inherit;
        font-weight: 400;
        padding-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;

        .help_link_widget,
        .fa {
            margin: 0;
        }
    }

    /* The very last element in the navbar is the search icon, the second
       last element is either the narrow description (for stream narrows) or
       the "title" (for other narrows). The flex-grow property ensures these
       elements take up the entirety of the white space, while flex-shrink
       accommodates narrower viewports. Setting flex-basis 0 enables an
       ellipsis to be displayed, as the 0 takes the place of the max-content
       default that would otherwise run titles under the search box. */
    .navbar_title,
    .narrow_description {
        flex: 1 1 0;
        margin: 0;
    }
}