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 ( -