I went with option 3, i.e. made a component from the resize script. If anyone else needs to solve this, I'll leave the code here.
The component:
<script>
function scaleElementToFit() {
const elements = document.querySelectorAll('table');
elements.forEach(function(element) {
const targetWidth = element.parentElement.clientWidth; // Get the width of the parent element
const actualWidth = element.offsetWidth;
if (actualWidth > targetWidth) {
const scaleFactor = targetWidth / actualWidth;
element.style.transform = 'scale(' + scaleFactor + ')';
element.style.transformOrigin = 'left top';
}
});
}
window.onload = scaleElementToFit;
</script>
Calling the component from the main report to ensure that no tables are too wide.
{{{component "resize_tables"}}}
N.B. the same issue can happen with images, but images are easier to resize since you don't have to take into account wordbreaks. This is my css to make the same adjustments to images.
I had to use 99% instead of 100%. I don't know exactly why. If I use 100% the image will be a tad too large and the rest of the report will be scaled down.
div img {
max-width: 99%;
height: auto;
}