From 05d3d7921577a3a8d357c3e28aaf4ca0f952525e Mon Sep 17 00:00:00 2001
From: Hendrik de Graaf <HendrikThePendric@users.noreply.github.com>
Date: Wed, 6 Sep 2023 15:28:19 +0200
Subject: [PATCH] fix: always have the full pagination in view (#431)

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

diff --git a/src/components/Visualization/Visualization.js b/src/components/Visualization/Visualization.js
index a35b81d52..b56fee4a0 100644
--- a/src/components/Visualization/Visualization.js
+++ b/src/components/Visualization/Visualization.js
@@ -111,6 +111,7 @@ export const Visualization = ({
     onError,
 }) => {
     const [uniqueLegendSets, setUniqueLegendSets] = useState([])
+    const [paginationMaxWidth, setPaginationMaxWidth] = useState(0)
     const [{ sortField, sortDirection, pageSize, page }, setSorting] =
         useReducer((sorting, newSorting) => ({ ...sorting, ...newSorting }), {
             sortField: null,
@@ -123,6 +124,27 @@ export const Visualization = ({
 
     const visualizationRef = useRef(visualization)
 
+    const containerCallbackRef = useCallback((node) => {
+        if (node === null || node.clientWidth === 0) {
+            return
+        }
+
+        const adjustSize = () => {
+            const containerInnerWidth = node.clientWidth
+            const scrollBox = node.querySelector('.tablescrollbox')
+            const scrollbarWidth = scrollBox.offsetWidth - scrollBox.clientWidth
+
+            setPaginationMaxWidth(containerInnerWidth - scrollbarWidth)
+        }
+
+        const sizeObserver = new window.ResizeObserver(adjustSize)
+        sizeObserver.observe(node)
+
+        adjustSize()
+
+        return sizeObserver.disconnect
+    }, [])
+
     const setPage = useCallback(
         (pageNum) =>
             setSorting({
@@ -281,7 +303,7 @@ export const Visualization = ({
     const isInModal = !!filters?.relativePeriodDate
 
     return (
-        <div className={styles.pluginContainer}>
+        <div className={styles.pluginContainer} ref={containerCallbackRef}>
             <div
                 data-test="line-list-loading-indicator"
                 className={cx(styles.fetchIndicator, {
@@ -413,6 +435,7 @@ export const Visualization = ({
                                         styles.stickyNavigation,
                                         sizeClass
                                     )}
+                                    style={{ maxWidth: paginationMaxWidth }}
                                 >
                                     <PaginationComponent
                                         offline={offline}