Extend canvasHeight option for automatic height.

[mathewjordan]

What does this do?

This work of mostly styling changes helps the Viewer component support automatic height within a wrapping container element. If an implementer uses either 100% or auto as values for options.canvasHeight configuration, the viewer with be absolutely positioned, and extend to the bounds of the relative element. Internally in the Clover Viewer, a combination of flexbox flex-grow and height CSS attributes expand the canvas "painting" to fit these bounds. This will be applied to Image, Video, and Sound canvases.

This can be implemented as follows:

<div style={{ position: "relative", height: "900px", zIndex: "0" }}>
  <CloverViewer
    iiifContent="https://example.org/iiif/manifest.json"
    options={{ canvasHeight: "auto" }} // or "100%"
  />
</div>

Further documentation can be found at /docs/viewer#canvas-height.

Notes

This follows work suggested by @tpendragon in the now closed #185.

[eliotjordan]

I tried this with our Clover viewer in Figgy and it works great. 💯

[tpendragon]

Thank you so much! Your support's been incredible, this simplifies our Clover implementation significantly.

[mathewjordan]

@eliotjordan @tpendragon Excllent, thank you both for the review. This has been released with v2.7.0 and is documented here https://samvera-labs.github.io/clover-iiif/docs/viewer#automatic-height.