config_display: columns height issue

[Zenoo]

The new config_display: columns prop creates an issue with the image height.
When displayed in two columns, there is a big white space at the end of the svg:

And when displayed in one column, the svg isn't high enough and ends up cutting the content:

I have to say I don't know how to fix this.
I don't know much about puppeteer to tweak the height, or if it's even possible.

[lowlighter]

It's probably because the puppeteer page width was too small, forcing the render to be on a single column
It should be fixed now 👍

[lowlighter]

Actually, I wonder if it's possible to set height to "auto" when using columns display
Because even though the media query is triggered, a single column render will still be capped by height, maybe auto will fix it

[Zenoo]

I'm not sure auto will work.
When inspecting the svg file, I encountered this error (same thing for the width, which is why I changed it to 100%:

[Zenoo]

I had an idea:
Maybe adding an overflow: auto on the foreighObject would allow for the svg to be scrollable on mobile?
it would solve the issue: Keep the same height for desktop, but allow for a scrollable svg on mobile.

I will test it out more later

[github-actions]

This issue seems to be inactive and will be automatically closed in a few days if it remains without any activity.

[Zenoo]

I did some testing, without any success, unfortunately.

overflow: auto on the foreignObject works, but only when using the SVG as-is, in the HTML.
When using it in an <img> tag, it stops working.
I'm kinda stuck here, to be honest 😩

[lowlighter]

I don't have any idea on how to solve this too 😕
I'll leave this issue open in case any one has a workaround idea for it

[lowlighter]

Superseded by #839