FIX: vertical centering of header, using display: table

app/assets/javascripts/discourse/components/header-extra-info.js.es6

@@ -1,6 +1,7 @@
 import DiscourseURL from 'discourse/lib/url';
 
 const TopicCategoryComponent = Ember.Component.extend({
+  classNames: ['extra-info-cell'],
   needsSecondRow: Ember.computed.gt('secondRowItems.length', 0),
   secondRowItems: function() { return []; }.property(),
 

app/assets/javascripts/discourse/components/home-logo.js.es6

@@ -2,7 +2,7 @@ import DiscourseURL from 'discourse/lib/url';
 import { setting } from 'discourse/lib/computed';
 
 export default Ember.Component.extend({
-  classNames: ["title"],
+  classNameBindings: [":title", "minimized"],
 
   targetUrl: function() {
     // For overriding by customizations

app/assets/javascripts/discourse/templates/header.hbs

@@ -1,8 +1,13 @@
-<div class='wrap'>
+<div {{bind-attr class=":wrap :d-header-wrap showExtraInfo:minimized:not-minimized"}}>
-  <div class='contents clearfix'>
+  <div class='d-header-table contents clearfix'>
+    <div class="d-header-row">
       {{home-logo minimized=showExtraInfo}}
       {{plugin-outlet "header-after-home-logo"}}
 
+      {{#if showExtraInfo}}
+        {{header-extra-info topic=topic}}
+      {{/if}}
+
       <div class='panel clearfix'>
         {{#unless currentUser}}
           {{#if showSignUpButton}}
@@ -10,6 +15,7 @@
           {{/if}}
           {{d-button action="showLogin" class="btn-primary btn-small login-button" icon="user" label="log_in"}}
         {{/unless}}
+        <div class="d-header-nav">
           <ul class='icons clearfix' role='navigation'>
             {{#if currentUser}}
               {{plugin-outlet "header-before-notifications"}}
@@ -57,10 +63,8 @@
           {{hamburger-menu visible=hamburgerVisible showKeyboardAction="showKeyboardShortcutsHelp"}}
           {{search-menu visible=searchVisible}}
         </div>
-
+      </div>
-    {{#if showExtraInfo}}
+    </div>
-      {{header-extra-info topic=topic}}
-    {{/if}}
   </div>
 </div>
 {{plugin-outlet "header-under-content"}}

app/assets/stylesheets/common/base/header.scss

@@ -11,12 +11,49 @@
     backface-visibility: hidden;  /** do magic for scrolling performance **/
   }
 
-    .contents {
+  .d-header-table {
-      margin: 8px 0;
+    display: table;
+    table-layout: fixed; /* or else long topic titles break everything */
+    width: 100%;
+    margin: 8px auto;
+  }
+  .d-header-row {
+    display: table-header-group; /* table-row doesn't work on mobile */
+  }
+  .d-header-wrap {
+    padding: 0;
+  }
+  .title, .extra-info-cell, .panel {
+    display: table-cell;
+  }
+  .title {
+    vertical-align: middle;
+    padding-left: 8px;
+    overflow: hidden;
+    width: 65%;
+  }
+  .extra-info-cell {
+    vertical-align: middle;
+    padding-left: 8px;
+  }
+  .panel {
+    width:35%;
+    text-align: right;
+    position: relative;
+    .menu-panel {
+      text-align: left;
+    }
   }
 
-    .title {
+  .not-minimized {
-      float: left;
+    .title { width: 65%; }
+    .panel { width: 35%; }
+  }
+  /* .minimized is different for desktop and mobile */
+
+  .d-header-nav {
+    position: relative;
+    float: right;
   }
 
   #site-logo {
@@ -27,13 +64,8 @@
     font-size: 1.643em;
   }
 
-    .panel {
-      float: right;
-      position: relative;
-    }
-
   .login-button, button.sign-up-button {
-      float: left;
+    float: none;
     margin-top: 7px;
     padding: 6px 10px;
     .fa { margin-right: 3px; }
@@ -44,7 +76,6 @@
   }
 
   .icons {
-      float: left;
     text-align: center;
     margin: 0 0 0 5px;
     list-style: none;

app/assets/stylesheets/desktop/header.scss

@@ -11,6 +11,11 @@
     padding:8px;
     font-size: 2.1em;
   }
+  .minimized {
+    .title           { width: 40px; vertical-align: baseline; }
+    .extra-info-cell { width: 74%; }
+    .panel           { width: 25%; }
+  }
 }
 
 @media all

app/assets/stylesheets/mobile/header.scss

@@ -17,6 +17,10 @@
     text-overflow: clip;
   }
 
+  .extra-info-cell {
+    display: none;
+  }
+
   .icons {
     .badge-notification {
       top: -5px;
@@ -31,6 +35,11 @@
   button.sign-up-button {
     display:none;
   }
+
+  .not-minimized, .minimized {
+    .title { width: auto; }
+    .panel { width: auto; }
+  }
 }
 
 #main-outlet {