From 3f67944be853ed05e036ff9a4b6819cedf02570a Mon Sep 17 00:00:00 2001
From: Luca Foscili <45429703+lucafoscili@users.noreply.github.com>
Date: Wed, 7 Feb 2024 12:25:11 +0100
Subject: [PATCH] kup-planner: fixed incorrectly placed horizontal scrollbar +
 style.

---
 packages/ketchup/src/components.d.ts          |  4 ++--
 .../kup-planner/utils/kup-gantt/kup-gantt.tsx |  5 +++--
 .../kup-horizontal-scroll.scss                |  2 --
 .../kup-horizontal-scroll.tsx                 | 19 ++++++++-----------
 .../kup-vertical-scroll.scss                  |  2 --
 5 files changed, 13 insertions(+), 19 deletions(-)

diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
index 7d73db8a05..39deb1b65e 100644
--- a/packages/ketchup/src/components.d.ts
+++ b/packages/ketchup/src/components.d.ts
@@ -2279,7 +2279,7 @@ export namespace Components {
         "rtl": boolean;
         "scrollNumber": number;
         "svgWidth": number;
-        "taskGanttRef": HTMLDivElement;
+        "taskListTrueRef": HTMLKupTaskListElement;
         "taskListWidth": number;
     }
     interface KupIframe {
@@ -6854,7 +6854,7 @@ declare namespace LocalJSX {
         "rtl"?: boolean;
         "scrollNumber"?: number;
         "svgWidth"?: number;
-        "taskGanttRef"?: HTMLDivElement;
+        "taskListTrueRef"?: HTMLKupTaskListElement;
         "taskListWidth"?: number;
     }
     interface KupIframe {
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.tsx b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.tsx
index 8f91d44056..c96958f73f 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.tsx
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.tsx
@@ -342,7 +342,7 @@ export class KupGantt {
      */
 
     @Element() rootElement: HTMLElement;
-
+    taskListTrueRef: HTMLKupTaskListElement = null;
     //---- Lifecycle hooks ----
 
     componentWillLoad() {
@@ -980,6 +980,7 @@ export class KupGantt {
                             setDoubleView={this.setDoubleView}
                             {...tableProps}
                             class="tasks"
+                            ref={(el) => (this.taskListTrueRef = el)}
                         />
                     )}
                     <kup-task-gantt
@@ -1022,7 +1023,7 @@ export class KupGantt {
                 {this.taskGanttRef && (
                     <kup-horizontal-scroll
                         svgWidth={this.svgWidth}
-                        taskGanttRef={this.taskGanttRef}
+                        taskListTrueRef={this.taskListTrueRef}
                         taskListWidth={this.taskListWidth}
                         scrollNumber={this.scrollX}
                         rtl={this.rtl}
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.scss b/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.scss
index 4d0d90c1f3..d853712ca0 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.scss
@@ -1,8 +1,6 @@
 .scrollWrapper {
   overflow: auto;
   max-width: 100%;
-  /*firefox*/
-  scrollbar-width: thin;
   /*iPad*/
   height: 1.2rem;
 }
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.tsx b/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.tsx
index 556756ab20..9b0f6e21c9 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.tsx
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-horizontal-scroll/kup-horizontal-scroll.tsx
@@ -16,7 +16,7 @@ export class HorizontalScroll {
     svgWidth: number;
 
     @Prop()
-    taskGanttRef: HTMLDivElement;
+    taskListTrueRef: HTMLKupTaskListElement;
 
     @Prop()
     rtl: boolean;
@@ -62,20 +62,17 @@ export class HorizontalScroll {
     }
 
     render() {
-        const rect = this.taskGanttRef.getBoundingClientRect();
+        const w =
+            this.taskListTrueRef?.getBoundingClientRect().width + 24 * 1.5 ?? 0; // 24 * 2 is the sum of padding and margin for both list and gantt, multiplied by 1.5 cause we need to add the other half to the right
 
         return (
             <div
                 dir="ltr"
-                style={
-                    rect
-                        ? {
-                              margin: this.rtl
-                                  ? `0px ${rect.x}px 0px 0px`
-                                  : `0px 0px 0px ${rect.x}px`,
-                          }
-                        : undefined
-                }
+                style={{
+                    margin: this.rtl
+                        ? `0px ${w}px 0px 12px`
+                        : `0px 12px 0px ${w}px`,
+                }}
                 class="scrollWrapper"
                 data-scrollx="true"
                 onScroll={this.horizontalScroll}
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-vertical-scroll/kup-vertical-scroll.scss b/packages/ketchup/src/components/kup-planner/utils/kup-vertical-scroll/kup-vertical-scroll.scss
index ee3493f4d1..afa2105d71 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-vertical-scroll/kup-vertical-scroll.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-vertical-scroll/kup-vertical-scroll.scss
@@ -2,8 +2,6 @@
   overflow: hidden auto;
   width: 1rem;
   flex-shrink: 0;
-  /*firefox*/
-  scrollbar-width: thin;
 }
 
 .scroll::-webkit-scrollbar {