From 06de056bb58a8dcd831891c3e48d93f6fcfe6f34 Mon Sep 17 00:00:00 2001
From: Yuri Kuznetsov <yurikuzn@users.noreply.github.com>
Date: Wed, 1 May 2024 12:37:10 +0300
Subject: [PATCH] fix kanban dropdown overflow

---
 client/res/templates/record/kanban-item.tpl |  2 +-
 client/src/app.js                           | 39 ++++++++++++++++++++-
 client/src/views/record/kanban-item.js      |  2 --
 frontend/less/espo/elements/dropdown.less   |  6 ++++
 4 files changed, 45 insertions(+), 4 deletions(-)

diff --git a/client/res/templates/record/kanban-item.tpl b/client/res/templates/record/kanban-item.tpl
index 580e45883e..ffaeec783a 100644
--- a/client/res/templates/record/kanban-item.tpl
+++ b/client/res/templates/record/kanban-item.tpl
@@ -4,7 +4,7 @@
         <div>
             {{#if isFirst}}
             {{#unless rowActionsDisabled}}
-            <div class="pull-right item-menu-container">{{{../itemMenu}}}</div>
+            <div class="pull-right item-menu-container fix-overflow">{{{../itemMenu}}}</div>
             {{/unless}}
             {{/if}}
             <div class="form-group">
diff --git a/client/src/app.js b/client/src/app.js
index c48125c6f3..196f0c6223 100644
--- a/client/src/app.js
+++ b/client/src/app.js
@@ -1409,7 +1409,9 @@ class App {
      * @private
      */
     initDomEventListeners() {
-        $(document).on('keydown.espo.button', e => {
+        const $document = $(document);
+
+        $document.on('keydown.espo.button', e => {
             if (
                 e.code !== 'Enter' ||
                 e.target.tagName !== 'A' ||
@@ -1426,6 +1428,41 @@ class App {
 
             e.preventDefault();
         });
+
+        $document.on('show.bs.dropdown', e => {
+            if (!e.target.parentElement.classList.contains('fix-overflow')) {
+                return;
+            }
+
+            const isRight = e.target.classList.contains('pull-right');
+
+            const $ul = $(e.target.parentElement).find('.dropdown-menu');
+            const ul = $ul.get(0);
+
+            const rect = e.target.getBoundingClientRect();
+
+            const parent = $ul.offsetParent().get(0);
+
+            if (!parent) {
+                return;
+            }
+
+            const scrollTop = parent === window.document.documentElement ?
+                (document.documentElement.scrollTop || document.body.scrollTop) :
+                parent.scrollTop;
+
+            const top = rect.top + scrollTop + e.target.getBoundingClientRect().height;
+
+            const left = isRight ?
+                rect.left - $(ul).outerWidth() + rect.width:
+                rect.left
+
+            $ul.css({
+                top: top,
+                left: left,
+                right: 'auto',
+            });
+        });
     }
 
     /**
diff --git a/client/src/views/record/kanban-item.js b/client/src/views/record/kanban-item.js
index 30f10eb419..46359cec38 100644
--- a/client/src/views/record/kanban-item.js
+++ b/client/src/views/record/kanban-item.js
@@ -39,8 +39,6 @@ class KanbanRecordItem extends View {
         };
     }
 
-    events = {}
-
     setup() {
         this.itemLayout = this.options.itemLayout;
         this.rowActionsView = this.options.rowActionsView;
diff --git a/frontend/less/espo/elements/dropdown.less b/frontend/less/espo/elements/dropdown.less
index 1d5856d1d7..c2d4695ca3 100644
--- a/frontend/less/espo/elements/dropdown.less
+++ b/frontend/less/espo/elements/dropdown.less
@@ -161,6 +161,12 @@ ul.dropdown-menu-with-icons {
     margin-right: 2px;
 }
 
+.fix-overflow {
+    .btn-group {
+        position: unset;
+    }
+}
+
 .dropdown-menu {
     .quick-search-list-item {
         input {