From cddb0e3143f62b27ae38464bdafae04a034fd1b2 Mon Sep 17 00:00:00 2001
From: HendrikThePendric <hendrik@dhis2.org>
Date: Thu, 12 Oct 2023 15:26:28 +0200
Subject: [PATCH] chore: take legend-key into account when computing pagination
 max-width (DHIS2-15465)

---
 src/components/Visualization/Visualization.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/Visualization/Visualization.js b/src/components/Visualization/Visualization.js
index def99b1b4..67f6eb019 100644
--- 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>