Aspect ratio distorted in overlay of tall images

[garrison]

URL to the relevant documentation

https://docs.quantum-computing.ibm.com/api/qiskit/transpiler#optimization-stage

Please describe the UI problem.

If you click on a very tall image and it is shown in the overlay, the aspect ratio will be distorted.

[beckykd]

Here are a few examples of other issues with some of the images.

• [ ] https://docs.quantum.ibm.com/build/circuit-visualization#plot-histogram- In this page, halfway down (on Plot histogram), "count" is way bigger than necessary - all of those "count" images seem too big. Luciano suggested trying "figsize".
• [ ] https://docs.quantum.ibm.com/build/unitary-synthesis, the example under re-synthesis is huge. Is there a way to control how big the image appears without modifying the image? That way, when someone clicks and expands it, it can get bigger without getting fuzzy.
• [ ] Here's another example where the image is already too big for the page, but then gets bigger and less clear when you click it: https://docs.quantum.ibm.com/transpile/defaults-and-configuration-options
• [ ] This image is in dark mode and gets stretched when you click it: https://docs.quantum.ibm.com/transpile/transpiler-stages

[Eric-Arellano]

TODOS:

• find new images that represent this, maybe synthetic ones
• play around with scroll bars, horizontal and vertical
• sometimes make modal bigger

TBD if we want to preserve the aspect ratio by shrinking the image vs use scroll bars.