From 013253ecde6eeb2e20ea92332079fac6a4ef0d80 Mon Sep 17 00:00:00 2001
From: Bryan Housel <bryan@mapbox.com>
Date: Sun, 11 Feb 2018 22:24:06 -0500
Subject: [PATCH] Improve combobox option visibility (closes #4761)

This improves the usability of the combobox when it appears over
other rows of fields (e.g. raw tag editor)
1. shrink size on left/right to provide more separation from content beneath
2. adjust box shadow for slightly more visibility
3. shrink size of first option by one pixel, so that the combobox
   options will never perfectly line up with rows that they cover
---
 css/80_app.css             | 5 +++--
 modules/lib/d3.combobox.js | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 63208b068..6fc8cc30b 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -1883,7 +1883,7 @@ input[type=number] {
 div.combobox {
     z-index: 9999;
     display: none;
-    box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
+    box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
     margin-top: -1px;
     background: white;
     max-height: 120px;
@@ -1896,7 +1896,7 @@ div.combobox {
 .combobox a {
     display: block;
     padding: 5px 10px;
-    border-top:1px solid #ccc;
+    border-top: 1px solid #ccc;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
@@ -1909,6 +1909,7 @@ div.combobox {
 
 .combobox a:first-child {
     border-top: 0;
+    padding: 4px 10px;
 }
 
 .combobox-caret {
diff --git a/modules/lib/d3.combobox.js b/modules/lib/d3.combobox.js
index 92cd0a736..60c2ecbdc 100644
--- a/modules/lib/d3.combobox.js
+++ b/modules/lib/d3.combobox.js
@@ -265,8 +265,8 @@ export function d3combobox() {
             var rect = node.getBoundingClientRect();
 
             wrapper
-                .style('left', rect.left + 'px')
-                .style('width', rect.width + 'px')
+                .style('left', (rect.left + 5) + 'px')
+                .style('width', (rect.width - 10) + 'px')
                 .style('top', rect.height + rect.top + 'px');
         }