gantt-task-react-v 1.0.20 → 1.0.21

package/dist/gantt-task-react.es.js

@@ -13147,12 +13147,12 @@ const TaskGanttContentInner = (props) => {
   ] });
 };
 const TaskGanttContent = memo(TaskGanttContentInner);
-const ganttVerticalContainer = "_ganttVerticalContainer_fjhll_1";
-const horizontalContainer = "_horizontalContainer_fjhll_81";
-const ganttHeader = "_ganttHeader_fjhll_99";
-const ganttBodyScroll = "_ganttBodyScroll_fjhll_109";
-const wrapper = "_wrapper_fjhll_127";
-const calendarDragging = "_calendarDragging_fjhll_153";
+const ganttVerticalContainer = "_ganttVerticalContainer_1nwo1_1";
+const horizontalContainer = "_horizontalContainer_1nwo1_85";
+const ganttHeader = "_ganttHeader_1nwo1_107";
+const ganttBodyScroll = "_ganttBodyScroll_1nwo1_117";
+const wrapper = "_wrapper_1nwo1_139";
+const calendarDragging = "_calendarDragging_1nwo1_173";
 const styles$2 = {
   ganttVerticalContainer,
   horizontalContainer,

package/dist/gantt-task-react.umd.js

@@ -13164,12 +13164,12 @@
     ] });
   };
   const TaskGanttContent = React.memo(TaskGanttContentInner);
-  const ganttVerticalContainer = "_ganttVerticalContainer_fjhll_1";
-  const horizontalContainer = "_horizontalContainer_fjhll_81";
-  const ganttHeader = "_ganttHeader_fjhll_99";
-  const ganttBodyScroll = "_ganttBodyScroll_fjhll_109";
-  const wrapper = "_wrapper_fjhll_127";
-  const calendarDragging = "_calendarDragging_fjhll_153";
+  const ganttVerticalContainer = "_ganttVerticalContainer_1nwo1_1";
+  const horizontalContainer = "_horizontalContainer_1nwo1_85";
+  const ganttHeader = "_ganttHeader_1nwo1_107";
+  const ganttBodyScroll = "_ganttBodyScroll_1nwo1_117";
+  const wrapper = "_wrapper_1nwo1_139";
+  const calendarDragging = "_calendarDragging_1nwo1_173";
   const styles$2 = {
     ganttVerticalContainer,
     horizontalContainer,

package/dist/style.css

@@ -581,12 +581,14 @@
   user-select: none;
   stroke-width: 0;
 }
-._ganttVerticalContainer_fjhll_1 {
+._ganttVerticalContainer_1nwo1_1 {
   display: flex;
   flex-direction: column;
-  /* allow horizontal scrolling so the gantt SVG can overflow and be scrolled */
-  overflow-x: auto;
+  /* inner container should not create a page-wide scroll; let wrapper handle horizontal overflow */
+  overflow-x: visible;
   overflow-y: hidden;
+  /* allow this flex child to shrink when its child is wider than available space */
+  min-width: 0;
   font-size: 0;
   margin: 0;
   padding: 0;
@@ -597,16 +599,16 @@
   min-height: 0;
 }
 
-._ganttVerticalContainer_fjhll_1::-webkit-scrollbar {
+._ganttVerticalContainer_1nwo1_1::-webkit-scrollbar {
   width: 1rem;
   height: 1rem;
 }
 
-._ganttVerticalContainer_fjhll_1::-webkit-scrollbar-corner {
+._ganttVerticalContainer_1nwo1_1::-webkit-scrollbar-corner {
   background: transparent;
 }
 
-._ganttVerticalContainer_fjhll_1::-webkit-scrollbar-thumb {
+._ganttVerticalContainer_1nwo1_1::-webkit-scrollbar-thumb {
   border: 4px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
@@ -614,50 +616,58 @@
   background-clip: padding-box;
 }
 
-._ganttVerticalContainer_fjhll_1::-webkit-scrollbar-thumb:hover {
+._ganttVerticalContainer_1nwo1_1::-webkit-scrollbar-thumb:hover {
   border: 2px solid transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   background: var(--gantt-scrollbar-thumb-color);
   background-clip: padding-box;
 }
 
-._horizontalContainer_fjhll_81 {
+._horizontalContainer_1nwo1_85 {
   margin: 0;
   padding: 0;
   /* keep inner container hidden overflow so content width is controlled by outer container */
   overflow: hidden;
+  /* allow inner container to be clipped instead of forcing parent width */
+  min-width: 0;
   height: 100%;
   min-height: 0;
 }
 
-._ganttHeader_fjhll_99 {
+._ganttHeader_1nwo1_107 {
   flex: 0 0 auto;
   z-index: 3;
 }
 
-._ganttBodyScroll_fjhll_109 {
+._ganttBodyScroll_1nwo1_117 {
   flex: 1 1 auto;
   /* vertical scrolling only here; horizontal controlled by the parent container */
   overflow-y: auto;
-  overflow-x: hidden;
+  /* allow horizontal overflow to be visible so the outer container's horizontal
+    scrollbar can control the full width of the gantt */
+  overflow-x: visible;
   min-height: 0;
   height: 100%;
 }
 
-._wrapper_fjhll_127 {
+._wrapper_1nwo1_139 {
   display: flex;
   padding: 0;
   margin: 0;
   list-style: none;
   outline: none;
   position: relative;
+  /* allow children to shrink; prevents child content from expanding the wrapper width */
+  min-width: 0;
+  /* let wrapper provide horizontal scrolling when children are wider than the view */
+  overflow-x: auto;
   /*noinspection CssUnresolvedCustomProperty*/
   border-bottom: 1px solid var(--gantt-divider-color);
   height: 100%;
   min-height: 0;
 }
 
-._calendarDragging_fjhll_153 {
+._calendarDragging_1nwo1_173 {
   cursor: grabbing;
 }
 /*noinspection CssUnresolvedCustomProperty*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.0.20",
+  "version": "1.0.21",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",