From df5da557afd9a0fb7c514cda151099c2f01ea026 Mon Sep 17 00:00:00 2001
From: Jakub Kosmydel <104823336+kosmydel@users.noreply.github.com>
Date: Fri, 8 Dec 2023 08:33:27 +0100
Subject: [PATCH] make the animations responsive

---
 src/CONST.ts                                  | 1 +
 src/components/IllustratedHeaderPageLayout.js | 8 ++++++--
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/CONST.ts b/src/CONST.ts
index ddedb550f368..fd07a58b0c68 100755
--- a/src/CONST.ts
+++ b/src/CONST.ts
@@ -951,6 +951,7 @@ const CONST = {
             3: 100,
         },
     },
+    CENTRAL_PANE_ANIMATION_HEIGHT: 200,
     LHN_SKELETON_VIEW_ITEM_HEIGHT: 64,
     EXPENSIFY_PARTNER_NAME: 'expensify.com',
     EMAIL: {
diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index 6c2ef0ccc90f..4dbe67df499f 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import CONST from '@src/CONST';
 import HeaderPageLayout from './HeaderPageLayout';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
 import Lottie from './Lottie';
@@ -34,6 +36,8 @@ const defaultProps = {
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
     const theme = useTheme();
     const styles = useThemeStyles();
+    const {isSmallScreenWidth} = useWindowDimensions();
+
     return (
         <HeaderPageLayout
             backgroundColor={backgroundColor || theme.appBG}
@@ -43,7 +47,7 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                     <Lottie
                         source={illustration}
                         style={styles.w100}
-                        webStyle={styles.h100}
+                        webStyle={isSmallScreenWidth ? styles.w100 : styles.h100}
                         autoPlay
                         loop
                     />
@@ -51,7 +55,7 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                 </>
             }
             // TODO: move to variables
-            headerContainerStyles={[styles.justifyContentCenter, styles.w100, {height: 200}]}
+            headerContainerStyles={[styles.justifyContentCenter, styles.w100, !isSmallScreenWidth && {height: CONST.CENTRAL_PANE_ANIMATION_HEIGHT}]}
             footer={footer}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...propsToPassToHeader}