Fix bug where autocomplete list could be displayed out of screen (#6469)

CHANGELOG

@@ -13,6 +13,7 @@ CHANGELOG Roundcube Webmail
 - Elastic: Improved UX of search dialogs (#6416)
 - Elastic: Fix unwanted thread expanding when selecting a collapsed thread in non-mobile mode (#6445)
 - Log errors caused by low pcre.backtrack_limit when sending a mail message (#6433)
+- Fix bug where autocomplete list could be displayed out of screen (#6469)
 - Fix style/navigation on error page depending on authentication state (#6362)
 - Fix so invalid smtp_helo_host is never used, fallback to localhost (#6408)
 - Fix custom logo size in Elastic (#6424)

program/js/app.js

@@ -5941,9 +5941,20 @@ function rcube_webmail()
       // reset content
       ul.innerHTML = '';
       this.env.contacts = [];
+
       // move the results pane right under the input box
-      var pos = $(this.ksearch_input).offset();
-      this.ksearch_pane.css({ left:pos.left+'px', top:(pos.top + this.ksearch_input.offsetHeight)+'px', display: 'none'});
+      var pos = $(this.ksearch_input).offset(),
+        w = $(window).width(),
+        left = w - pos.left > 200 ? pos.left : w - 200,
+        width = Math.min(400, w - left);
+
+      this.ksearch_pane.css({
+        left: left + 'px',
+        top: (pos.top + this.ksearch_input.offsetHeight + 1) + 'px',
+        maxWidth: width + 'px',
+        minWidth: '200px',
+        display: 'none'
+      });
     }
 
     // add each result line to list

skins/elastic/styles/widgets/dialogs.less

@@ -58,12 +58,20 @@
 
 #rcmKSearchpane {
     width: auto;
-    max-width: none;
-    overflow: hidden;
 
     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,
@@ -105,11 +113,6 @@ html.layout-phone {
         width: 100%;
     }
 
-    #rcmKSearchpane {
-        bottom: auto;
-        border: 1px solid @color-input-border;
-    }
-
     .popover-header {
         display: block;
         border-radius: 0;

skins/larry/styles.css

@@ -2426,6 +2426,8 @@ ul.toolbarmenu li span.copy {
 	border: 0;
 	cursor: default;
 	position: relative;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 #rcmKSearchpane ul li i.icon {