init

OpenArchival.Blazor/wwwroot/css/app.css

@@ -0,0 +1,23 @@
+/* Constrains the main container */
+.dynamic-content-container {
+    width: 100%;
+    max-width: 100vw;
+    overflow-x: hidden;
+    word-wrap: break-word;
+}
+
+/* Forces images, videos, and iframes to scale down to the screen size */
+.dynamic-content-container img,
+.dynamic-content-container video,
+.dynamic-content-container iframe {
+    width: 100%;
+    height: auto;
+}
+
+/* Handles wide tables by adding a scrollbar just to the table */
+.dynamic-content-container table {
+    display: block;
+    max-width: 100%;
+    overflow-x: auto;
+    white-space: nowrap;
+}

OpenArchival.Blazor/wwwroot/js/imageSizeGetter.js

@@ -1,8 +1,10 @@
 function centerImageAndGetHeight(containerElement) {
+    console.log("centerImageAndGetHeight called", containerElement);
     const imageElement = containerElement.querySelector('img');
 
     return new Promise((resolve, reject) => {
         if (!imageElement) {
+            console.error("Image element not found.");
             return reject("Image element not found.");
         }
 
@@ -11,6 +13,7 @@
             const carouselViewport = imageElement.closest('.mud-carousel');
             if (!carouselViewport) {
                 // Failsafe if not in a carousel, just return height
+                console.log("Not in carousel, height:", imageElement.clientHeight);
                 resolve(imageElement.clientHeight);
                 return;
             }
@@ -25,13 +28,26 @@
             // Apply the padding directly to the image
             imageElement.style.paddingLeft = `${paddingLeft}px`;
 
-            // Resolve with the measured height for the parent component
-            resolve(imageElement.clientHeight);
+            // Calculate height based on aspect ratio to avoid getting stuck in a tall container
+            const ratio = imageElement.naturalHeight / imageElement.naturalWidth;
+            const calculatedHeight = imageWidth * ratio;
+
+            console.log("Image measurement:", { 
+                naturalWidth: imageElement.naturalWidth, 
+                naturalHeight: imageElement.naturalHeight,
+                imageWidth: imageWidth,
+                calculatedHeight: calculatedHeight
+            });
+
+            resolve(calculatedHeight);
 
             removeListeners();
         };
 
-        const errorHandler = () => reject("Could not load image.");
+        const errorHandler = () => {
+            console.error("Could not load image.");
+            reject("Could not load image.");
+        };
         const removeListeners = () => {
             imageElement.removeEventListener("load", successHandler);
             imageElement.removeEventListener("error", errorHandler);
@@ -45,4 +61,15 @@
             imageElement.addEventListener("error", errorHandler);
         }
     });
+}
+
+function getElementHeight(element) {
+    console.log("getElementHeight called", element);
+    if (!element) {
+        console.warn("getElementHeight: element is null");
+        return 0;
+    }
+    const height = element.clientHeight;
+    console.log("getElementHeight returns", height);
+    return height;
 }