dropdown out of screen fix

client/src/ui/app-init.js

@@ -58,10 +58,15 @@ function uiAppInit() {
     $document.on('show.bs.dropdown', e => {
         let isUp;
 
+        /** @type {HTMLElement} */
         const target = e.target;
         const $dropdown = $(e.target).find('.dropdown-menu');
 
+        /** @type {HTMLElement} */
+        const dropdownElement = $dropdown.get(0);
+
         const height = $dropdown.outerHeight();
+        const width = $dropdown.outerWidth();
 
         {
             const $target = $(target);
@@ -84,6 +89,20 @@ function uiAppInit() {
             }
         }
 
+        if (target.getBoundingClientRect().left - width < 0) {
+            const maxWidth = target.getBoundingClientRect().right - target.getBoundingClientRect().width / 2;
+
+            dropdownElement.style.maxWidth = maxWidth + 'px';
+
+            const $group = $(target);
+
+            $group.one('hidden.bs.dropdown', () => {
+                dropdownElement.style.maxWidth = '';
+            });
+
+            return;
+        }
+
         const $dashletBody = $(target).closest('.dashlet-body');
 
         if ($dashletBody.length) {

frontend/less/espo/elements/dropdown.less

@@ -201,6 +201,23 @@ ul.dropdown-menu {
     }
 }
 
+@media screen and (max-width: @screen-xs-max) {
+    ul.dropdown-menu {
+        max-width: 100vw;
+
+        > li {
+            > a {
+
+                &,
+                > div {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                }
+            }
+        }
+    }
+}
+
 ul.dropdown-menu {
     > li.divider:first-child {
         display: none;