Scale viewer to its container.

[tpendragon]

Work towards #179

I'm very new to this project, so I don't know what kind of tests y'all do, but this is my attempt at getting the CSS to adjust to its parent container. It looks like it works to me, if I shove the demo page into a tiny container.

Old (main branch):

This branch:

[tpendragon]

@eliotjordan did some testing for our use case and says this didn't make it any better, so I'm closing.

[mathewjordan]

@tpendragon Can we chat to talk it through? The goal is to have Clover extend to the width of its wrapping container on the client side, correct? Similar to how Mirador behaves?

So, in this example, Clover's canvas would extend it's height and width automatically to fit. The thumbnails for canvases would take a certain amount of that height, but the canvas height would grow accordingly (using flexbox).

<div style="height: 1000px; width: 100%">
  <CloverIIIFViewer />
</div>

[tpendragon]

So, in this example, Clover's canvas would extend it's height and width automatically to fit. The thumbnails for canvases would take a certain amount of that height, but the canvas height would grow accordingly (using flexbox).

Right. That's what I thought this PR accomplished, but Eliot's gonna show me some problems with it a little later. I think maybe I messed up the thumbnails in the preview ribbon.

[mathewjordan]

Sweet, so here is the issue I authored... My approach was going to be this....

---

Description

There is a use case where Clover needs to expand to the height of its wrapping container rather than have it be set by a fixed height in the config. As a side note, auto height expansion is how Mirador works.

Update type of canvasHeight to be more specific.
https://developer.mozilla.org/en-US/docs/Web/CSS/height

canvasHeight?: React.CSSProperties["height"];

If canvasHeight === "auto", then we set a class at a high level within Clover and use flexbox to grow the canvasHeight to its bounds. We then also need to set Clover to absolutely position itself and expand to the bounds of the consuming apps wrapping container.

Done Looks Like

• Clover has auto height expansion from the settable config
• Clover can also be set by a fixed height (backwards compatibility for current implementations)

[tpendragon]

@mathewjordan Looks great!