From 23fe5cae52f052b00e4222cf4fb245565aba904f Mon Sep 17 00:00:00 2001
From: Ishpaul Singh <ishpaul207@gmail.com>
Date: Thu, 7 Sep 2023 23:00:48 +0530
Subject: [PATCH] made the fix specific to safari

---
 src/components/IllustratedHeaderPageLayout.js | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
index 6634281ec495..87cf2e68403b 100644
--- a/src/components/IllustratedHeaderPageLayout.js
+++ b/src/components/IllustratedHeaderPageLayout.js
@@ -9,8 +9,10 @@ import ScreenWrapper from './ScreenWrapper';
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import * as StyleUtils from '../styles/StyleUtils';
+import useWindowDimensions from '../hooks/useWindowDimensions';
 import FixedFooter from './FixedFooter';
 import useNetwork from '../hooks/useNetwork';
+import * as Browser from '../libs/Browser';
 
 const propTypes = {
     ...headerWithBackButtonPropTypes,
@@ -35,12 +37,14 @@ const defaultProps = {
 
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, ...propsToPassToHeader}) {
     const {isOffline} = useNetwork();
+    const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
+    const appBGColor = StyleUtils.getBackgroundColorStyle(themeColors.appBG);
     return (
         <ScreenWrapper
             style={[StyleUtils.getBackgroundColorStyle(backgroundColor)]}
             shouldEnablePickerAvoiding={false}
             includeSafeAreaPaddingBottom={false}
-            offlineIndicatorStyle={[StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}
+            offlineIndicatorStyle={[appBGColor]}
         >
             {({safeAreaPaddingBottomStyle}) => (
                 <>
@@ -50,16 +54,19 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                         titleColor={backgroundColor === themeColors.appBG ? undefined : themeColors.textColorfulBackground}
                         iconFill={backgroundColor === themeColors.appBG ? undefined : themeColors.iconColorfulBackground}
                     />
-                    <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(themeColors.appBG), !isOffline ? safeAreaPaddingBottomStyle : {}]}>
-                        {/* Safari on ios has a bug where overscrolling the page scrollview shows green the background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422#issuecomment-1666890994 */}
-                        <View style={[styles.dualColorOverscrollSpacer]}>
-                            <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor)]} />
-                            <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(themeColors.appBG)]} />
-                        </View>
+                    <View style={[styles.flex1, appBGColor, !isOffline ? safeAreaPaddingBottomStyle : {}]}>
+                        {/* Safari on ios/mac has a bug where overscrolling the page scrollview shows green the background color. This is a workaround to fix that. https://github.com/Expensify/App/issues/23422 */}
+                        {Browser.isSafari() && (
+                            <View style={[styles.dualColorOverscrollSpacer]}>
+                                <View style={[styles.flex1, StyleUtils.getBackgroundColorStyle(backgroundColor)]} />
+                                <View style={[isSmallScreenWidth ? styles.flex1 : styles.flex3, appBGColor]} />
+                            </View>
+                        )}
                         <ScrollView
                             contentContainerStyle={safeAreaPaddingBottomStyle}
                             showsVerticalScrollIndicator={false}
                         >
+                            {!Browser.isSafari() && <View style={styles.overscrollSpacer(backgroundColor, windowHeight)} />}
                             <View style={[styles.alignItemsCenter, styles.justifyContentEnd, StyleUtils.getBackgroundColorStyle(backgroundColor)]}>
                                 <Lottie
                                     source={illustration}
@@ -68,9 +75,9 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                                     loop
                                 />
                             </View>
-                            <View style={[styles.pt5, StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}>{children}</View>
+                            <View style={[styles.pt5, appBGColor]}>{children}</View>
                         </ScrollView>
-                        {!_.isNull(footer) && <FixedFooter style={[StyleUtils.getBackgroundColorStyle(themeColors.appBG)]}>{footer}</FixedFooter>}
+                        {!_.isNull(footer) && <FixedFooter>{footer}</FixedFooter>}
                     </View>
                 </>
             )}