Fix height setting on HMO and Mirador

web/components/Documents/HumanMadeObject.js

@@ -78,14 +78,18 @@ export default function HumanMadeObject(item) {
       </Container>
 
       {item.subjectOfManifest && (
-        <Box h="70vh" gridArea="image">
-          <MiradorWithNoSSR manifests={[{ manifest: item.subjectOfManifest }]} />
+        <Box gridArea="image">
+          <MiradorWithNoSSR manifests={[{ manifest: item.subjectOfManifest }]} height="70vh" />
         </Box>
       )}
 
       {item.manifest && !item.subjectOfManifest && (
-        <Box h="70vh" gridArea="image">
-          <MiradorWithNoSSR hideWindowTitle="true" manifests={[{ manifest: item.manifest }]} />
+        <Box gridArea="image">
+          <MiradorWithNoSSR
+            hideWindowTitle="true"
+            manifests={[{ manifest: item.manifest }]}
+            height="70vh"
+          />
         </Box>
       )}
 

web/components/MiradorViewer/index.js

@@ -102,7 +102,14 @@ export default function MiradorViewer(props) {
   const mode = useColorModeValue('light', 'dark')
   const ID = `mirador-${nanoid()}`
 
-  const { variant, manifests, workspaceControlPanel = false, gridArea, catalog } = props
+  const {
+    variant,
+    manifests,
+    workspaceControlPanel = false,
+    gridArea,
+    catalog,
+    height = '50vh',
+  } = props
 
   const { variantSettings, plugins } = getVariant(variant)
   const windows = manifests ? mergeManifestAndVariant(manifests, variantSettings) : null
@@ -172,7 +179,7 @@ export default function MiradorViewer(props) {
   }, [mode])
 
   return (
-    <Box h="50vh" position="relative" gridArea={gridArea} bgColor="#eeeeee">
+    <Box h={height} position="relative" gridArea={gridArea} bgColor="#eeeeee">
       <Box h="100%" id={ID} />
     </Box>
   )