Elastic: Fix position and style of auto-complete dropdown on small screens (#6951)

2 files changed, 27 insertions, 25 deletions

diff --git a/skins/elastic/styles/widgets/dialogs.less b/skins/elastic/styles/widgets/dialogs.less
index 088be827b..666f94ebf 100644
--- a/skins/elastic/styles/widgets/dialogs.less
+++ b/skins/elastic/styles/widgets/dialogs.less
@@ -68,25 +68,6 @@
     }
 }
 
-#rcmKSearchpane {
-    width: auto;
-    height: auto;
-
-    li {
-        padding-right: .5rem;
-    }
-
-    html.layout-small &,
-    html.layout-phone & {
-        bottom: auto;
-        border: 1px solid @color-input-border;
-    }
-
-    html.layout-phone & {
-        max-width: 100% !important;
-    }
-}
-
 html.layout-small,
 html.layout-phone {
     .popover:not(.select-menu) {
@@ -166,15 +147,36 @@ html.touch .popover {
 .select-menu {
     max-width: initial;
     margin: 0;
-
-    .listing li a {
-        padding-left: .25rem;
-        outline: 0; // for Android browser
-    }
+    height: auto;
 
     .popover-header {
         border-radius: .25rem .25rem 0 0 !important;
     }
+
+    .listing li {
+        a {
+            padding-left: .25rem;
+            outline: 0; // for Android browser
+        }
+
+        &:last-child {
+            border-bottom-right-radius: .25rem;
+            border-bottom-left-radius: .25rem;
+        }
+    }
+
+    // Use 'inline' class for menus that have a list elements with no <a> inside
+    // and no header
+    &.inline {
+        .listing li {
+            padding-right: .5rem;
+
+            &:first-child {
+                border-top-left-radius: .25rem;
+                border-top-right-radius: .25rem;
+            }
+        }
+    }
 }
 
 /** PGP Key search/import dialog **/
diff --git a/skins/elastic/ui.js b/skins/elastic/ui.js
index cd2e444c0..199073fb8 100644
--- a/skins/elastic/ui.js
+++ b/skins/elastic/ui.js
@@ -3182,7 +3182,7 @@ function rcube_elastic_ui()
             .on('blur', function() { list.removeClass('focus'); })
             .on('focus mousedown', function() { list.addClass('focus'); });
 
-        list = $('<ul>').addClass('form-control recipient-input')
+        list = $('<ul>').addClass('form-control recipient-input ac-input')
             .append($('<li>').append(input))
             .on('click', function() { input.focus(); });