From 90bcd57d2c20cdfd6f49b0c69ec925aac76cea09 Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Sat, 19 Apr 2025 19:29:12 +0300
Subject: [PATCH] dropdown out of screen fix

---
 client/src/ui/app-init.js                 | 19 +++++++++++++++++++
 frontend/less/espo/elements/dropdown.less | 17 +++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/client/src/ui/app-init.js b/client/src/ui/app-init.js
index d19029890c..c094410a16 100644
--- a/client/src/ui/app-init.js
+++ b/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) {
diff --git a/frontend/less/espo/elements/dropdown.less b/frontend/less/espo/elements/dropdown.less
index 456a38d903..2bca093166 100644
--- a/frontend/less/espo/elements/dropdown.less
+++ b/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;