Add horizontal scrollbar for table part

Signed-off-by: Laurent Fasani <[email protected]>

src/components/gantt/use-vertical-scrollbars.ts

@@ -26,13 +26,15 @@ export const useVerticalScrollbars = (): [
         ganttTaskContentRef.current.scrollTop;
       //  On chrome, if a horizontal scrollbar is displayed in ganttTaskContentRef then the size of the gantt
       // is greater. So, when scrolling gantt to the bottom it goes more in the bottom
-      // than the taskListContent part can. In in case, ganttTaskContentRef.current.scrollTop is too high
-      // Th line below allow to lower ganttTaskContentRef.current.scrollTop
+      // than the taskListContent part can. In this case, ganttTaskContentRef.current.scrollTop is too high
+      // The line below allow to lower ganttTaskContentRef.current.scrollTop
       ganttTaskContentRef.current.scrollTop =
         taskListContentRef.current.scrollTop;
     } else {
       ganttTaskContentRef.current.scrollTop =
         taskListContentRef.current.scrollTop;
+      taskListContentRef.current.scrollTop =
+        ganttTaskContentRef.current.scrollTop;
     }
   };
 

src/components/task-list/task-list-table.module.css

@@ -1,4 +1,3 @@
 .taskListWrapper {
   display: table;
-  border-bottom: #e6e4e4 1px solid;
 }

src/components/task-list/task-list.module.css

@@ -8,7 +8,9 @@
 .ganttTableWrapper {
   display: grid;
   overflow: hidden;
-  grid-template-rows: min-content
+  grid-template-rows: min-content;
+  overflow-x: auto;
+  scrollbar-width: thin;
 }
 
 .ganttTableWrapper::-webkit-scrollbar {

src/components/task-list/task-list.tsx

@@ -158,6 +158,7 @@ const TaskListInner: React.FC<TaskListProps> = ({
               ),
               backgroundSize: `100% ${fullRowHeight * 2}px`,
               backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`,
+              overflow: "hidden",
             }}
           >
             <TaskListTable