From 5fc8c90e6518992a273eda27e9d7b68d171cadd3 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Wed, 20 Mar 2019 12:37:58 -0400
Subject: [PATCH] Always align the search results popover with the search field

---
 css/80_app.css           | 26 ++++++++++++++++++--------
 modules/ui/search_add.js |  2 +-
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index a3e62bc7c..cbeb949c6 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -599,13 +599,18 @@ button.add-note svg.icon {
     position: relative;
     width: 100%;
     min-width: 150px;
-    max-width: 300px;
+    max-width: 325px;
+}
+[dir='ltr'] .search-add .search-wrap {
     border-radius: 20px 4px 4px 20px;
 }
+[dir='rtl'] .search-add .search-wrap {
+    border-radius: 4px 20px 20px 4px;
+}
 .search-add .search-wrap.focused .tooltip {
     display: none;
 }
-.search-add .search-wrap:nth-last-child(2) {
+.search-add .search-wrap:last-child {
     border-radius: 20px;
 }
 .search-add input[type='search'] {
@@ -635,16 +640,21 @@ button.add-note svg.icon {
     right: 10px;
 }
 .search-add .popover {
-    max-height: 600px;
-    width: 100%;
-    position: absolute;
-    top: 44px;
     border: none;
     border-radius: 6px;
-    max-width: 350px;
+    position: absolute;
+    max-height: 600px;
+    top: 44px;
+    width: 200%;
+    max-width: 325px;
+    margin: auto;
+    left: auto;
+    right: auto;
 }
 .search-add .popover .popover-content {
     overflow-y: auto;
+    height: 100%;
+    max-height: 60vh;
 }
 .search-add .popover,
 .search-add .popover .popover-content {
@@ -680,7 +690,7 @@ button.add-note svg.icon {
     background: transparent;
 }
 .search-add .popover .list {
-    max-height: 65vh;
+    height: 100%;
 }
 .search-add .list-item > .row {
     display: flex;
diff --git a/modules/ui/search_add.js b/modules/ui/search_add.js
index 12b04485b..8c2be0f32 100644
--- a/modules/ui/search_add.js
+++ b/modules/ui/search_add.js
@@ -116,7 +116,7 @@ export function uiSearchAdd(context) {
         searchWrap
             .call(svgIcon('#iD-icon-search', 'search-icon pre-text'));
 
-        popover = selection
+        popover = searchWrap
             .append('div')
             .attr('class', 'popover fillL hide')
             .on('mousedown', function() {