From ebb6eea333565e5d1c4977fb660180edd2780696 Mon Sep 17 00:00:00 2001
From: Justin Kambic <justin.kambic@elastic.co>
Date: Tue, 20 Jul 2021 12:06:26 -0400
Subject: [PATCH] [Synthetics] Fix mobile synthetics image clipping (#106128)

* Change hardcoded image size value to prevent clipping of mobile synthetics screenshots.

* Compute max values for `ref`-style screenshots to improve display ux.
---
 .../synthetics/step_screenshot_display.tsx    | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/uptime/public/components/synthetics/step_screenshot_display.tsx b/x-pack/plugins/uptime/public/components/synthetics/step_screenshot_display.tsx
index 1224a31cfabb4..8b4a116f34967 100644
--- a/x-pack/plugins/uptime/public/components/synthetics/step_screenshot_display.tsx
+++ b/x-pack/plugins/uptime/public/components/synthetics/step_screenshot_display.tsx
@@ -16,7 +16,7 @@ import {
 import styled from 'styled-components';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import React, { useContext, useEffect, useRef, useState, FC } from 'react';
+import React, { useContext, useEffect, useMemo, useRef, useState, FC } from 'react';
 import useIntersection from 'react-use/lib/useIntersection';
 import {
   isScreenshotRef as isAScreenshotRef,
@@ -36,16 +36,13 @@ interface StepScreenshotDisplayProps {
   lazyLoad?: boolean;
 }
 
-const IMAGE_WIDTH = 640;
-const IMAGE_HEIGHT = 360;
+const IMAGE_MAX_WIDTH = 640;
 
 const StepImage = styled(EuiImage)`
   &&& {
     figcaption {
       display: none;
     }
-    width: ${IMAGE_WIDTH},
-    height: ${IMAGE_HEIGHT},
     objectFit: 'cover',
     objectPosition: 'center top',
   }
@@ -139,11 +136,22 @@ export const StepScreenshotDisplay: FC<StepScreenshotDisplayProps> = ({
     }
   }, [basePath, checkGroup, stepIndex, isScreenshotRef]);
 
+  const refDimensions = useMemo(() => {
+    if (isAScreenshotRef(screenshotRef)) {
+      const { height, width } = screenshotRef.ref.screenshotRef.screenshot_ref;
+      return { height, width };
+    }
+  }, [screenshotRef]);
+
   const shouldRenderImage = hasIntersected || !lazyLoad;
   return (
     <div
       ref={containerRef}
-      style={{ backgroundColor: pageBackground, height: IMAGE_HEIGHT, width: IMAGE_WIDTH }}
+      style={{
+        backgroundColor: pageBackground,
+        maxWidth: Math.min(IMAGE_MAX_WIDTH, refDimensions?.width ?? Number.MAX_VALUE),
+        maxHeight: refDimensions?.height ?? undefined,
+      }}
     >
       {shouldRenderImage && isScreenshotBlob && (
         <BaseStepImage stepName={stepName} stepIndex={stepIndex} url={url} />