From faab9b15e84f22b7db7db4c355efef267ae02aab Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 20 Jul 2023 15:58:26 +0200
Subject: [PATCH] iOS: Fix message height jump on load (#3544)

---
 src/components/common/EmbeddedMessage.scss |  2 +-
 src/components/middle/message/Invoice.scss |  1 +
 src/components/middle/message/Invoice.tsx  | 13 +++++++++++--
 src/components/ui/Skeleton.tsx             | 10 +++++++---
 4 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/common/EmbeddedMessage.scss b/src/components/common/EmbeddedMessage.scss
index 41d3c4c44..3dbbb407a 100644
--- a/src/components/common/EmbeddedMessage.scss
+++ b/src/components/common/EmbeddedMessage.scss
@@ -101,7 +101,7 @@
     .emoji {
       width: calc(1.125 * var(--message-text-size, 1rem)) !important;
       height: calc(1.125 * var(--message-text-size, 1rem)) !important;
-      vertical-align: text-bottom !important;
+      vertical-align: bottom !important;
     }
 
     .custom-emoji {
diff --git a/src/components/middle/message/Invoice.scss b/src/components/middle/message/Invoice.scss
index 313d7829e..86706bfd9 100644
--- a/src/components/middle/message/Invoice.scss
+++ b/src/components/middle/message/Invoice.scss
@@ -21,6 +21,7 @@
       .invoice-image {
         position: relative;
         width: 100%;
+        max-width: 100%;
         max-height: 30rem;
         object-fit: cover;
         border-bottom-left-radius: var(--border-bottom-left-radius);
diff --git a/src/components/middle/message/Invoice.tsx b/src/components/middle/message/Invoice.tsx
index 19a741091..80f59db71 100644
--- a/src/components/middle/message/Invoice.tsx
+++ b/src/components/middle/message/Invoice.tsx
@@ -9,6 +9,7 @@ import { getMessageInvoice, getWebDocumentHash } from '../../../global/helpers';
 import { formatCurrency } from '../../../util/formatCurrency';
 import renderText from '../../common/helpers/renderText';
 import getCustomAppendixBg from './helpers/getCustomAppendixBg';
+import buildStyle from '../../../util/buildStyle';
 
 import useLayoutEffectWithPrevDeps from '../../../hooks/useLayoutEffectWithPrevDeps';
 import useLang from '../../../hooks/useLang';
@@ -72,6 +73,14 @@ const Invoice: FC<OwnProps> = ({
     }
   }, [shouldAffectAppendix, photoUrl, isInSelectMode, isSelected, theme]);
 
+  const width = forcedWidth || photo?.dimensions?.width;
+
+  const style = buildStyle(
+    photo?.dimensions && `width: ${width}px`,
+    photo?.dimensions && `aspect-ratio: ${photo.dimensions.width} / ${photo.dimensions.height}`,
+    Boolean(!photo?.dimensions && forcedWidth) && `width: ${forcedWidth}px`,
+  );
+
   return (
     <div
       ref={ref}
@@ -92,13 +101,13 @@ const Invoice: FC<OwnProps> = ({
                 className="invoice-image"
                 src={photoUrl}
                 alt=""
-                style={forcedWidth ? `width: ${forcedWidth}px` : undefined}
+                style={style}
                 crossOrigin="anonymous"
               />
             )}
             {!photoUrl && photo && (
               <Skeleton
-                width={forcedWidth || photo.dimensions?.width}
+                width={width}
                 height={photo.dimensions?.height}
                 forceAspectRatio
               />
diff --git a/src/components/ui/Skeleton.tsx b/src/components/ui/Skeleton.tsx
index 17ead61a6..c33875321 100644
--- a/src/components/ui/Skeleton.tsx
+++ b/src/components/ui/Skeleton.tsx
@@ -1,6 +1,7 @@
-import type { FC } from '../../lib/teact/teact';
 import React from '../../lib/teact/teact';
 
+import type { FC } from '../../lib/teact/teact';
+
 import buildClassName from '../../util/buildClassName';
 import buildStyle from '../../util/buildStyle';
 
@@ -27,8 +28,11 @@ const Skeleton: FC<OwnProps> = ({
 }) => {
   const classNames = buildClassName('Skeleton', variant, animation, className, inline && 'inline');
   const aspectRatio = (width && height) ? `aspect-ratio: ${width}/${height}` : undefined;
-  const style = forceAspectRatio ? aspectRatio
-    : buildStyle(Boolean(width) && `width: ${width}px`, Boolean(height) && `height: ${height}px`);
+  const style = buildStyle(
+    forceAspectRatio && aspectRatio,
+    Boolean(width) && `width: ${width}px`,
+    !forceAspectRatio && Boolean(height) && `height: ${height}px`,
+  );
   return (
     <div className={classNames} style={style}>{inline && '\u00A0'}</div>
   );