top_navbar: Allow spectator items to participate in flexbox.

web/styles/zulip.css

@@ -999,6 +999,17 @@ body.has-overlay-scrollbar {
     background-color: hsl(0deg 0% 0% / 70%);
 }
 
+/* Set flex display on login buttons only in the
+   spectator view. We want them to display none
+   otherwise. */
+.spectator-view .column-right .spectator_login_buttons {
+    display: flex;
+
+    @media (width < $xl_min) or (height < $short_navbar_cutoff_height) {
+        display: none;
+    }
+}
+
 .column-right {
     width: var(--right-sidebar-width);
     max-width: var(--right-sidebar-width);
@@ -1008,22 +1019,41 @@ body.has-overlay-scrollbar {
 
     .spectator_login_buttons {
         display: flex;
-        justify-content: space-evenly;
+        /* Allow the login buttons flexbox to
-        position: absolute;
+           grow and shrink to fit the available
-        top: 8px;
+           area. */
-        /* gear menu + help menu width (40px * 2) */
+        flex: 1 1 0;
-        right: 80px;
+        /* Use a flexbox gap of 7px between the
-        /* width of right column - width of gear icon - right margin of column-right (250px - 40px - 40px -7px) */
+           buttons to reflect the outer 7px of space. */
-        width: 163px;
+        gap: 7px;
-
+        /* This should be removed once the navbar
-        @media (width < $xl_min) or (height < $short_navbar_cutoff_height) {
+           has been rewritten entirely with modern
-            display: none;
+           layout methods. For now, we pull this up
-        }
+           so that the buttons and search box are
+           the same height and their boxes sit on the
+           same invisible line. */
+        margin-top: -1px;
 
         & a {
             font-size: calc(16em / 14);
+            /* Vertically size the buttons to
+               match the search box. */
+            line-height: 28px;
             font-weight: 600;
             color: hsl(0deg 0% 20%);
+            /* Allow individual buttons to grow
+               and shrink inside their containers. */
+            flex: 1 1 0;
+            /* Center the text nodes within the
+               flex items. */
+            text-align: center;
+            /* Internationalization: disallow wrapping,
+               and display an ellipsis when there's not
+               space enough to accommodate the button
+               text. */
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
 
             &:hover {
                 text-decoration: none;
@@ -3546,10 +3576,21 @@ select.invite-as {
 
 .header-main .column-right {
     display: flex;
-    width: auto;
+    /* Make the top navbar right column its full width,
+       less 7px of space on the left and right. */
+    width: calc(var(--right-sidebar-width) - 7px - 7px);
     justify-content: flex-end;
     align-items: center;
-    margin-right: 7px;
+    /* Move the column to the right with absolute
+       positioning, rather than margin. */
+    right: 7px;
+
+    @media (width < $xl_min) or (height < $short_navbar_cutoff_height) {
+        /* For a diminutive right column in the navbar,
+           allow the width to be that of the flexing
+           button elements. */
+        width: auto;
+    }
 
     & a:focus {
         filter: none;

web/templates/navbar.hbs

@@ -29,21 +29,13 @@
             </div>
         </div>
         <div class="column-right">
-            <div class="only-visible-for-spectators">
+            <div class="spectator_login_buttons only-visible-for-spectators">
-                <div class="spectator_login_buttons">
+                <a href="/register/"  class="signup_button">
-                    <a href="/register/"  class="signup_button">
+                    {{t 'Sign up' }}
-                        <span>{{t 'Sign up' }}</span>
+                </a>
-                    </a>
+                <a class="login_button">
-                    <div class="divider">|</div>
+                    {{t 'Log in' }}
-                    <a class="login_button">
+                </a>
-                        <span>{{t 'Log in' }}</span>
-                    </a>
-                </div>
-                <div class="spectator_narrow_login_button" data-tippy-content="{{t 'Log in' }}" data-tippy-placement="bottom">
-                    <a class="header-button login_button">
-                        <i class="fa fa-sign-in"></i>
-                    </a>
-                </div>
             </div>
             <div id="userlist-toggle" class="hidden-for-spectators tippy-zulip-delayed-tooltip" data-tooltip-template-id="userlist-tooltip-template">
                 <a id="userlist-toggle-button" role="button" class="header-button" tabindex="0">
@@ -65,6 +57,11 @@
                     <img class="header-button-avatar" src="{{user_avatar}}"/>
                 </a>
             </div>
+            <div class="spectator_narrow_login_button only-visible-for-spectators" data-tippy-content="{{t 'Log in' }}" data-tippy-placement="bottom">
+                <a class="header-button login_button">
+                    <i class="fa fa-sign-in"></i>
+                </a>
+            </div>
         </div>
     </nav>
 </div>