fix: Nasty hack to get image aspect correct in safari

The images in the summary were not rendering with the correct aspect
ratio when they were wide. This made them look like squashed squares,
instead of rectangles. I added another parameter to the ImagePlaceholder
component to fix this in the places where it was broken on safari,
because there was no general fix that worked for all the places that the
placeholder is called.

src/components/ImagePlaceholder.jsx

@@ -12,6 +12,7 @@ export default function ImagePlaceholder({
   className,
   maxHeight,
   maxWidth,
+  fixAspectRatio
 }) {
   const [signedSrc, setSignedSrc] = useState();
   const [imageLoaded, setLoaded] = useState(false);
@@ -21,16 +22,20 @@ export default function ImagePlaceholder({
     ? {
         ...style,
         transform: "scaleX(-1)",
-        width: maxHeight ? "auto" : "100%",
-        height: maxHeight ? "100%" : "auto",
       }
     : {
         ...style,
         transform: "scaleX(1)",
-        width: maxHeight ? "auto" : "100%",
-        height: maxHeight ? "100%" : "auto",
       };
 
+  updatedStyle.width = "100%";
+
+  if (fixAspectRatio && imageDimensions[0] > imageDimensions[1]) {
+    updatedStyle.width = "auto";
+  }
+
+  updatedStyle.height = "100%"
+
   if (maxHeight) {
     updatedStyle.maxHeight = maxHeight;
   }
@@ -112,7 +117,8 @@ ImagePlaceholder.propTypes = {
   imageDimensions: PropTypes.arrayOf(PropTypes.string).isRequired,
   mirrored: PropTypes.bool,
   maxHeight: PropTypes.string,
-  maxWidth: PropTypes.string
+  maxWidth: PropTypes.string,
+  fixAspectRatio: PropTypes.bool
 };
 
 ImagePlaceholder.defaultProps = {
@@ -121,4 +127,5 @@ ImagePlaceholder.defaultProps = {
   className: "",
   maxHeight: null,
   maxWidth: null,
+  fixAspectRatio: false
 };

src/components/ImageWithModal.jsx

@@ -7,7 +7,7 @@ import { signedPublicLink } from "../libs/awsLib";
 
 
 export default function ImageWithModal(props) {
-  const { thumbSrc, src, title, showModal, vertical, maxHeight, maxWidth } = props;
+  const { thumbSrc, src, title, showModal, vertical, maxHeight, maxWidth, fixAspectRatio } = props;
   const [modalOpen, setModalOpen] = useState(false);
   const [signedSrc, setSignedSrc] = useState();
   const [signedThumbnailSrc, setSignedThumbnailSrc] = useState();
@@ -43,6 +43,7 @@ export default function ImageWithModal(props) {
           className="thumbnail"
           maxHeight={maxHeight}
           maxWidth={maxWidth}
+          fixAspectRatio={fixAspectRatio}
         />
       </Button>
     );
@@ -59,6 +60,7 @@ export default function ImageWithModal(props) {
           className="thumbnail"
           maxHeight={maxHeight}
           maxWidth={maxWidth}
+          fixAspectRatio={fixAspectRatio}
         />
       </Button>
       <Modal
@@ -85,13 +87,15 @@ ImageWithModal.propTypes = {
   showModal: PropTypes.func,
   vertical: PropTypes.bool,
   maxHeight: PropTypes.string,
-  maxWidth: PropTypes.string
+  maxWidth: PropTypes.string,
+  fixAspectRatio: PropTypes.bool
 };
 
 ImageWithModal.defaultProps = {
   title: "Missing",
   showModal: null,
   vertical: false,
   maxHeight: null,
-  maxWidth: null
+  maxWidth: null,
+  fixAspectRatio: false
 };

src/components/Results.jsx

@@ -137,6 +137,7 @@ export default function Results({ match }) {
           vertical={isVertical}
           maxHeight="350px"
           maxWidth="100%"
+          fixAspectRatio
       />
         <AlignmentMeta metadata={searchMeta}/>
       </CustomInputSummary>

src/components/SearchSummary.jsx

@@ -24,6 +24,7 @@ export default function SearchSummary({ searchAlgorithm, input }) {
         input.libraryName?.toLowerCase().includes("vnc")
       }
       maxHeight={maxHeight}
+      fixAspectRatio
     />
   );