From a923ed822e2f7e5b91b3c967a9df4084a5ce2afa Mon Sep 17 00:00:00 2001
From: Tim Erickson <tim@neutyp.com>
Date: Tue, 5 Dec 2017 20:08:59 -0800
Subject: [PATCH] improve the logic of our dropdown positioning

---
 src/components/App/Header.js            | 4 +++-
 src/components/UI/Dropdown/Dropdown.css | 3 ++-
 src/components/UI/Dropdown/Dropdown.js  | 2 ++
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/App/Header.js b/src/components/App/Header.js
index fa2885c3d50c..1d770fab4fde 100644
--- a/src/components/App/Header.js
+++ b/src/components/App/Header.js
@@ -65,8 +65,9 @@ export default class Header extends React.Component {
               <Dropdown
                 classNameButton="nc-appHeader-button nc-appHeader-quickNew"
                 label="Quick add"
+                dropdownTopOverlap="30px"
                 dropdownWidth="160px"
-                dropdownPosition="right"
+                dropdownPosition="left"
               >
                 {
                   collections.filter(collection => collection.get('create')).toList().map(collection =>
@@ -90,6 +91,7 @@ export default class Header extends React.Component {
                   : null
               }
               <Dropdown
+                dropdownTopOverlap="50px"
                 dropdownWidth="100px"
                 dropdownPosition="right"
                 button={
diff --git a/src/components/UI/Dropdown/Dropdown.css b/src/components/UI/Dropdown/Dropdown.css
index cf21ec9f7c6c..321abf3520d0 100644
--- a/src/components/UI/Dropdown/Dropdown.css
+++ b/src/components/UI/Dropdown/Dropdown.css
@@ -54,8 +54,9 @@
 
 .nc-dropdownList {
   @apply(--dropdownList);
+  margin: 0;
   position: absolute;
-  top: 39px;
+  top: 0;
   left: 0;
   min-width: 100%;
   z-index: 1;
diff --git a/src/components/UI/Dropdown/Dropdown.js b/src/components/UI/Dropdown/Dropdown.js
index 4b77cbba8c95..4ee8bdf24f40 100644
--- a/src/components/UI/Dropdown/Dropdown.js
+++ b/src/components/UI/Dropdown/Dropdown.js
@@ -10,10 +10,12 @@ const Dropdown = ({
   classNameButton = '',
   dropdownWidth = 'auto',
   dropdownPosition = 'left',
+  dropdownTopOverlap = '0',
   children
 }) => {
   const style = {
     width: dropdownWidth,
+    top: dropdownTopOverlap,
     left: dropdownPosition === 'left' ? 0 : 'auto',
     right: dropdownPosition === 'right' ? 0 : 'auto',
   };