Fix the horizontal canvas scrolling on card opening

1 files changed, 25 insertions, 5 deletions

diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js
index 5a7071e8..aba7254a 100644
--- a/client/components/cards/cardDetails.js
+++ b/client/components/cards/cardDetails.js
@@ -23,12 +23,32 @@ BlazeComponent.extendComponent({
     this.componentParent().mouseHasEnterCardDetails = false;
   },
 
+  scrollParentContainer: function() {
+    const cardPanelWidth = 510;
+    let bodyBoardComponent = this.componentParent();
+
+    let $cardContainer = bodyBoardComponent.$('.js-lists');
+    let $cardView = this.$(this.firstNode());
+    let cardContainerScroll = $cardContainer.scrollLeft();
+    let cardContainerWidth = $cardContainer.width();
+
+    let cardViewStart = $cardView.offset().left;
+    let cardViewEnd = cardViewStart + cardPanelWidth;
+
+    let offset = false;
+    if (cardViewStart < 0) {
+      offset = cardViewStart;
+    } else if(cardViewEnd > cardContainerWidth) {
+      offset = cardViewEnd - cardContainerWidth;
+    }
+
+    if (offset) {
+      bodyBoardComponent.scrollLeft(cardContainerScroll + offset);
+    }
+  },
+
   onRendered: function() {
-    var bodyBoardComponent = this.componentParent();
-    var additionalMargin = 550;
-    var $cardDetails = this.$(this.firstNode());
-    var scollLeft = $cardDetails.offset().left + additionalMargin;
-    bodyBoardComponent.scrollLeft(scollLeft);
+    this.scrollParentContainer();
   },
 
   onDestroyed: function() {