From 5bdf9fc80c2240166938538bfcac972c469245b4 Mon Sep 17 00:00:00 2001
From: Puneet Lath <puneet@expensify.com>
Date: Mon, 14 Aug 2023 10:21:06 -0400
Subject: [PATCH] Merge pull request #24466 from s-alves10/fix/issue-24424

(cherry picked from commit bebbaa2d1d4b72103cded70be1da755297821eba)
---
 src/components/ThumbnailImage.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
index 47516164864f..d68d7530839b 100644
--- a/src/components/ThumbnailImage.js
+++ b/src/components/ThumbnailImage.js
@@ -1,10 +1,11 @@
 import lodashClamp from 'lodash/clamp';
 import React, {useCallback, useState} from 'react';
-import {View} from 'react-native';
+import {View, Dimensions} from 'react-native';
 import PropTypes from 'prop-types';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
 import styles from '../styles/styles';
 import * as StyleUtils from '../styles/StyleUtils';
+import * as DeviceCapabilities from '../libs/DeviceCapabilities';
 import useWindowDimensions from '../hooks/useWindowDimensions';
 
 const propTypes = {
@@ -41,12 +42,17 @@ const defaultProps = {
  */
 
 function calculateThumbnailImageSize(width, height, windowHeight) {
+    if (!width || !height) {
+        return {};
+    }
     // Width of the thumbnail works better as a constant than it does
     // a percentage of the screen width since it is relative to each screen
     // Note: Clamp minimum width 40px to support touch device
     let thumbnailScreenWidth = lodashClamp(width, 40, 250);
     const imageHeight = height / (width / thumbnailScreenWidth);
-    let thumbnailScreenHeight = lodashClamp(imageHeight, 40, windowHeight * 0.4);
+    // On mWeb, when soft keyboard opens, window height changes, making thumbnail height inconsistent. We use screen height instead.
+    const screenHeight = DeviceCapabilities.canUseTouchScreen() ? Dimensions.get('screen').height : windowHeight;
+    let thumbnailScreenHeight = lodashClamp(imageHeight, 40, screenHeight * 0.4);
     const aspectRatio = height / width;
 
     // If thumbnail height is greater than its width, then the image is portrait otherwise landscape.