From 2390b7eb174f8bd8b6b0af97176c7c0a886be71f Mon Sep 17 00:00:00 2001
From: Niyi Adeosun <adeniyi.adeosun@toggl.com>
Date: Mon, 19 Feb 2024 08:18:07 +0100
Subject: [PATCH] fix(trello): adjust selectors and debounce interval, and
 tweak css margins

Closes: #2275
---
 src/content/trello.js | 13 +++++++------
 src/styles/style.css  |  2 ++
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/content/trello.js b/src/content/trello.js
index 983af7967..5ee3785ac 100644
--- a/src/content/trello.js
+++ b/src/content/trello.js
@@ -6,9 +6,11 @@ const getProject = () => {
   return project ? project.textContent.trim() : '';
 };
 
+const cardContainerSelector = '.window-overlay .window-wrapper'
+
 togglbutton.render(
   '.window-header:not(.toggl)',
-  { observe: true },
+  { observe: true, debounceInterval: 300 },
   (elem) => {
     const actionButton =
       $('.js-move-card') ||
@@ -30,7 +32,7 @@ togglbutton.render(
       className: 'trello',
       description: getDescription,
       projectName: getProject,
-      container: '.window-wrapper'
+      container: cardContainerSelector
     });
 
     // Pass through click on Trello button to the timer link
@@ -42,7 +44,7 @@ togglbutton.render(
     container.appendChild(link);
     actionButton.parentNode.insertBefore(container, actionButton);
   },
-  '.window-wrapper'
+  cardContainerSelector
 );
 
 /* Checklist buttons */
@@ -69,15 +71,14 @@ togglbutton.render(
       buttonType: 'minimal',
       projectName: getProject,
       description: getDescription,
-      container: '.window-wrapper'
+      container: cardContainerSelector
     });
     const wrapper = document.createElement('span');
     wrapper.classList.add('checklist-item-menu');
     wrapper.style.display = 'flex';
     wrapper.style.alignItems = 'center';
-    wrapper.style.marginRight = '4px';
     wrapper.appendChild(link);
     elem.querySelector('.checklist-item-controls').appendChild(wrapper);
   },
-  '.checklist-items-list, .window-wrapper'
+  `.checklist-items-list, ${cardContainerSelector}`
 );
diff --git a/src/styles/style.css b/src/styles/style.css
index 9cd11fc66..60f6a3c41 100644
--- a/src/styles/style.css
+++ b/src/styles/style.css
@@ -175,6 +175,8 @@ SingleTaskPaneToolbar .toggl-button.asana-board, /* new ui v1 */
 .toggl-button.trello-list:not(.toggl-button-edit-form-button) {
   visibility: hidden;
   pointer-events: none;
+  margin-top: 6px;
+  margin-left: 1px;
 }
 .checklist-item-details:hover .toggl-button.trello-list, .toggl-button.trello-list.active:not(.toggl-button-edit-form-button) {
   visibility: visible;