From a108b7958b6a75ad6653a26a63eec8c8efed3342 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Thu, 28 Feb 2019 18:05:47 -0500
Subject: [PATCH] Keep add feature search results a constant width instead of
 matching search input width

---
 css/80_app.css           | 20 +++++++++++---------
 modules/ui/search_add.js |  2 +-
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 9036834cd..befce3184 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -585,12 +585,13 @@ button.add-note svg.icon {
 .search-add {
     width: 100%;
     justify-content: center;
+    position: relative;
 }
 .search-add .search-wrap {
     position: relative;
     width: 100%;
     min-width: 200px;
-    max-width: 400px;
+    max-width: 250px;
     border-radius: 20px 0 0 20px;
     background: #fff;
 }
@@ -600,17 +601,13 @@ button.add-note svg.icon {
 .search-add input[type='search'] {
     position: relative;
     width: 100%;
-    height:100%;
+    height: 100%;
     border: none;
     font-size: 14px;
     text-indent: 25px;
     padding: 5px 10px;
     border-radius: inherit;
 }
-.search-add input[type='search']:focus {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-}
 .search-add .search-icon {
     color: #333;
     display: block;
@@ -623,10 +620,15 @@ button.add-note svg.icon {
     max-height: 250px;
     width: 100%;
     position: absolute;
-    top: 40px;
-    border-radius: 0 0 4px 4px;
-    border-top: 2px solid #DCDCDC;
+    top: 44px;
+    border: none;
+    border-radius: 6px;
     overflow-y: auto;
+    max-width: 350px;
+}
+.search-add .popover::-webkit-scrollbar {
+    /* don't overlap rounded corners */
+    background: transparent;
 }
 .search-add .popover .list {
     max-height: 70vh;
diff --git a/modules/ui/search_add.js b/modules/ui/search_add.js
index 72a75ab9e..0aa29b022 100644
--- a/modules/ui/search_add.js
+++ b/modules/ui/search_add.js
@@ -62,7 +62,7 @@ export function uiSearchAdd(context) {
         searchWrap
             .call(svgIcon('#iD-icon-search', 'search-icon pre-text'));
 
-        popover = searchWrap
+        popover = selection
             .append('div')
             .attr('class', 'popover fillL hide')
             .on('mousedown', function() {