chore: take legend-key into account when computing pagination max-wid…

…th (DHIS2-15465)
dhis2 · Oct 16, 2023 · cddb0e3 · cddb0e3
1 parent fc13e74
commit cddb0e3
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/components/Visualization/Visualization.js b/src/components/Visualization/Visualization.js
@@ -149,6 +149,7 @@ export const Visualization = ({
     const shouldShowTimeDimensionWarning = isInModal && !hasTimeDimension
 
     const visualizationRef = useRef(visualization)
+    const legendKeyRef = useRef(null)
 
     const containerCallbackRef = useCallback((node) => {
         if (node === null) {
@@ -162,8 +163,12 @@ export const Visualization = ({
             const containerInnerWidth = node.clientWidth
             const scrollBox = node.querySelector('.tablescrollbox')
             const scrollbarWidth = scrollBox.offsetWidth - scrollBox.clientWidth
+            const legendKeyWidth =
+                legendKeyRef.current?.offsetWidth > 0
+                    ? legendKeyRef.current.offsetWidth + 4
+                    : 0
             const paginationMaxWidth = Math.max(
-                containerInnerWidth - scrollbarWidth,
+                containerInnerWidth - scrollbarWidth - legendKeyWidth,
                 PAGINATION_MIN_WIDTH
             )
 
@@ -355,6 +360,7 @@ export const Visualization = ({
         <div
             className={styles.legendKeyScrollbox}
             data-test="visualization-legend-key"
+            ref={legendKeyRef}
         >
             <LegendKey legendSets={uniqueLegendSets} />
         </div>