UX: Improving header scalability for large font themes

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

@@ -4,7 +4,7 @@
   top: 0;
   z-index: z("header");
   background-color: $header_background;
-  box-shadow: 0 2px 4px -1px rgba(0,0,0, .25);
+  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, .25);
 
   .docked & {
     position: fixed;
@@ -33,11 +33,11 @@
   .panel {
     float: right;
     position: relative;
+    display: flex;
+    align-items: center;
   }
 
   .login-button, button.sign-up-button {
-    float: left;
-    margin-top: 7px;
     padding: 6px 10px;
     .fa { margin-right: 3px; }
   }
@@ -62,14 +62,17 @@
   margin: 0 0 0 5px;
   list-style: none;
 
-
   > li {
     float: left;
   }
   .icon {
     position: relative;
-    display: block;
-    padding: 3px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.2857em;
+    height: 2.2857em;
+    padding: .2143em;
     color: dark-light-choose(scale-color($header_primary, $lightness: 50%), $header_primary);
     text-decoration: none;
     cursor: pointer;
@@ -77,11 +80,13 @@
     border-left: 1px solid transparent;
     border-right: 1px solid transparent;
     transition: all linear .15s;
-
-
+    img.avatar {
+      width: 2.2857em;
+      height: 2.2857em;
+    }
     &:hover {
       color: $primary;
-      background-color:  $primary-low;
+      background-color: $primary-low;
       border-top: 1px solid transparent;
       border-left: 1px solid transparent;
       border-right: 1px solid transparent;
@@ -119,8 +124,7 @@
   }
 
   .d-icon {
-    width: 32px;
-    height: 32px;
+    width: 100%;
     font-size: $font-up-4;
     line-height: $line-height-large;
     display: inline-block;

app/assets/stylesheets/common/base/menu-panel.scss

@@ -19,7 +19,7 @@
 
 .menu-panel {
   border: 1px solid $primary-low;
-  box-shadow: 0 2px 2px rgba(0,0,0, .25);
+  box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
   background-color: $secondary;
   z-index: z("header");
   padding: 0.5em;
@@ -44,7 +44,6 @@
     overflow-y: auto;
     overflow-x: hidden;
   }
-
 }
 
 .menu-links.columned {
@@ -69,7 +68,6 @@
       margin-left: 0.5em;
       color: dark-light-choose($primary-medium, $secondary-medium);
     }
-
   }
 
   li.category-link {
@@ -77,7 +75,7 @@
     background-color: transparent;
     display: inline-flex;
     margin: 0.25em 0.5em;
-    width: 44%;
+    width: 43%;
     .badge-notification {
       color: dark-light-choose($primary-medium, $secondary-medium);
       background-color: transparent;
@@ -90,7 +88,6 @@
       overflow: hidden;
       text-overflow: ellipsis;
       display: inline-block;
-      max-width: 80%;
       &.bar, &.bullet {
         color: $primary;
       }
@@ -100,7 +97,7 @@
           padding-top: 2px;
         }
         span {
-          z-index: z("base") * -1;        
+          z-index: z("base") * -1;
         }
       }
     }

app/assets/stylesheets/desktop/header.scss

@@ -5,9 +5,9 @@
 .d-header {
   left: 0;
   padding-top: 3px;
-  height: 60px;
+  height: 4.2857em;
   .d-icon-home {
-    padding:8px;
+    padding: 8px;
     font-size: $font-up-5;
   }
 
@@ -17,9 +17,10 @@
   }
 }
 
-@media all
-and (max-width : 570px) {
-  .extra-info-wrapper {display: none;}
+@media all and (max-width: 570px) {
+  .extra-info-wrapper {
+    display: none;
+  }
 }
 
 #main {