improve nav css

- use flexbox to make nav respond better to different heights instead of using magic number
- ensure browsers have same heights so changing them doesn't change height of navbar and doesn't cause icons/text to shift

packages/desktop-gui/cypress/integration/project_nav_spec.js

@@ -60,6 +60,13 @@ describe('Project Nav', function () {
       cy.percySnapshot()
     })
 
+    it('displays "Tests" page when switching to a beta browser', () => {
+      cy.get('.browsers .dropdown-chosen').click()
+      cy.contains('.browsers', 'beta').first().click()
+      cy.get('.list-as-table').should('be.visible')
+      cy.percySnapshot()
+    })
+
     describe('runs page', function () {
       beforeEach(function () {
         cy.fixture('runs').as('runs')

packages/desktop-gui/src/app/nav.scss

@@ -38,16 +38,21 @@
       i {
         font-size: 11px;
         color: #555;
+        margin-right: 5px;
       }
     }
 
     > li {
+      display: flex;
+
       > div,
       > a {
-        font-size: 13px;
+        align-items: center;
         color: #444;
-        padding: 1px 20px 0 20px;
-        line-height: 42px;
+        display: flex;
+        font-size: 13px;
+        justify-content: center;
+        padding: 0 20px;
       }
 
       > a  {
@@ -178,14 +183,17 @@
   }
 
   .dropdown-chosen {
-    border-radius: 4px;
+    background: #f6f6f6;
     border: 1px solid #c7c7c7;
-    line-height: 28px !important;
-    background-color: #f6f6f6;
+    border-radius: 4px;
+    display: flex;
+    height: 34px;
+    justify-content: center;
 
     img {
+      margin-right: 5px;
       position: relative;
-      top: -1px;
+      top: 1px;
     }
 
     &.disabled,
@@ -194,6 +202,10 @@
     }
   }
 
+  .dropdown-toggle {
+    margin-left: 4px;
+  }
+
   .fa-check-circle, .fa-sync-alt {
     margin-right: 3px;
   }