From 5e74c717048429e038f166ca9011fdb7b7577c53 Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Sat, 11 Jun 2016 17:00:52 -0700
Subject: [PATCH] Better dropdowns in tabs

---
 app/components/ContentTypeDropdown.js | 4 +++-
 app/components/previewModeDropdown.js | 4 +++-
 app/css/components/tabs.scss          | 6 ++----
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/app/components/ContentTypeDropdown.js b/app/components/ContentTypeDropdown.js
index ecbc27bef..206413d82 100644
--- a/app/components/ContentTypeDropdown.js
+++ b/app/components/ContentTypeDropdown.js
@@ -8,7 +8,9 @@ const ContentTypeDropdown = ({updateRequestContentType, activeContentType}) => {
 
   return (
     <Dropdown>
-      <button><i className="fa fa-caret-down"></i></button>
+      <button className="tall">
+        <i className="fa fa-caret-down"></i>
+      </button>
       <ul>
         {contentTypes.map(contentType => (
           <li key={contentType}>
diff --git a/app/components/previewModeDropdown.js b/app/components/previewModeDropdown.js
index 560dd4ad0..0e806bf34 100644
--- a/app/components/previewModeDropdown.js
+++ b/app/components/previewModeDropdown.js
@@ -6,7 +6,9 @@ import {PREVIEW_MODES, getPreviewModeName} from '../lib/previewModes'
 const PreviewModeDropdown = ({updatePreviewMode}) => {
   return (
     <Dropdown>
-      <button><i className="fa fa-caret-down"></i></button>
+      <button className="tall">
+        <i className="fa fa-caret-down"></i>
+      </button>
       <ul>
         {PREVIEW_MODES.map(previewMode => (
           <li key={previewMode}>
diff --git a/app/css/components/tabs.scss b/app/css/components/tabs.scss
index 43df6e70c..40b6c998b 100644
--- a/app/css/components/tabs.scss
+++ b/app/css/components/tabs.scss
@@ -31,10 +31,7 @@ $border-color: $hl-md;
     border-bottom: 1px solid $border-color;
     border-top: 0 !important;
     white-space: nowrap;
-
-    * {
-      color: $hl-xxl;
-    }
+    display: flex;
 
     &:first-child {
       border-left-color: transparent;
@@ -45,6 +42,7 @@ $border-color: $hl-md;
     }
 
     & > * {
+      color: $hl-xxl;
       height: 100%;
       padding-left: $padding-md / 4;
       padding-right: $padding-md / 4;