LIMS-380: Fix position of autoPROC images

[ndg63276]

JIRA ticket: LIMS-380

Summary:

https://github.com/DiamondLightSource/SynchWeb/pull/390 introduced a bug where image modals opened in autoPROC's summary file opened at the top of the page, requiring much scrolling just to see them.

Changes:

• Don't set the iframe width/height on load, this confuses the modals
• Use the jquery on resize event to set the iframe width/height to just smaller than the parent div

To test:

• Go to a data collection with successful autoPROC runs, eg /dc/visit/cm37235-3/id/14930010
• Go to the autoPROC tab, click "Logs & Files", then click "View" next to "summary_inlined.html"
• When the popup loads (can be a few seconds as v large files), scroll down to one of the graphs, and click on it. It should open a larger version, without needing to scroll. Check it closes with the x button.
• Resize the iframe, check the contents are resized to match the space available, and that images still work
• Repeat with a "xia2.html" file from a Xia2 run, check the content resizes as the iframe is resized
• (NB if you try on a txt file, it won't resize as the content is within \<pre>\</pre> tags)

[gfrn]

There is a small bug where it doesn't take up 100% of the parent element's width once the dialogue is opened. I believe there is a simpler alternative to JS, which is setting width and height of the iframe to 98%.

It comes with the added benefit of fixing a bug where once the page is resized from mobile size to desktop size, it retains the original size.

I can make a PR for this PR, with the changes made, seems to work with xia2.html and summary_inlined.html, unless there is a known bug with using CSS that way

[ndg63276]

Please, be my guest :)

[ndg63276]

Actually, probably easier for me to add a commit. Is this what you meant? I tried without the onload but without content the sizing was wrong.

[gfrn]

I think that's because further down, the default height/width is set to a pixel value on load, I'll create a PR, it may be easier that way

https://github.com/DiamondLightSource/SynchWeb/pull/838

[ndg63276]

Yep that's much neater, thanks!