From 36c9605b5547c10e4b006f25a8f67de80455ba49 Mon Sep 17 00:00:00 2001
From: Filip Solecki <filip.solecki@swmansion.com>
Date: Thu, 1 Aug 2024 12:12:36 +0200
Subject: [PATCH 1/4] Fix modal height

---
 src/components/EmptyStateComponent/index.tsx        | 3 ++-
 src/components/EmptyStateComponent/types.ts         | 1 +
 src/pages/workspace/expensifyCard/EmptyCardView.tsx | 1 +
 src/styles/index.ts                                 | 1 -
 4 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index 56f8fa5e3d83..dd5d00e3ed04 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -25,6 +25,7 @@ function EmptyStateComponent({
     headerStyles,
     headerContentStyles,
     emptyStateForegroundStyles,
+    minModalHeight = 400,
 }: EmptyStateComponentProps) {
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
@@ -79,7 +80,7 @@ function EmptyStateComponent({
     }, [headerMedia, headerMediaType, headerContentStyles, videoAspectRatio, styles.emptyStateVideo]);
 
     return (
-        <ScrollView contentContainerStyle={styles.emptyStateScrollView}>
+        <ScrollView contentContainerStyle={[styles.emptyStateScrollView, {minHeight: minModalHeight}]}>
             <View style={styles.skeletonBackground}>
                 <SkeletonComponent
                     gradientOpacityEnabled
diff --git a/src/components/EmptyStateComponent/types.ts b/src/components/EmptyStateComponent/types.ts
index 258e8a610e16..94860893c2c4 100644
--- a/src/components/EmptyStateComponent/types.ts
+++ b/src/components/EmptyStateComponent/types.ts
@@ -20,6 +20,7 @@ type SharedProps<T> = {
     headerMediaType: T;
     headerContentStyles?: StyleProp<ViewStyle & ImageStyle>;
     emptyStateForegroundStyles?: StyleProp<ViewStyle>;
+    minModalHeight?: number;
 };
 
 type MediaType<HeaderMedia, T extends MediaTypes> = SharedProps<T> & {
diff --git a/src/pages/workspace/expensifyCard/EmptyCardView.tsx b/src/pages/workspace/expensifyCard/EmptyCardView.tsx
index a7d2b9949703..ace0b84165d8 100644
--- a/src/pages/workspace/expensifyCard/EmptyCardView.tsx
+++ b/src/pages/workspace/expensifyCard/EmptyCardView.tsx
@@ -39,6 +39,7 @@ function EmptyCardView() {
                     title={translate('workspace.expensifyCard.issueAndManageCards')}
                     subtitle={translate('workspace.expensifyCard.getStartedIssuing')}
                     emptyStateForegroundStyles={isSmallScreenWidth && {justifyContent: 'flex-start'}}
+                    minModalHeight={500}
                 />
             </View>
             <Text style={[styles.textMicroSupporting, styles.m5]}>{translate('workspace.expensifyCard.disclaimer')}</Text>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index b3cb5b624bac..ef34fda8982d 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5110,7 +5110,6 @@ const styles = (theme: ThemeColors) =>
         },
 
         emptyStateScrollView: {
-            minHeight: 400,
             height: '100%',
             flex: 1,
         },

From 8d2780cbe8022e68ad99e33595ba36117e3669de Mon Sep 17 00:00:00 2001
From: Filip Solecki <filip.solecki@swmansion.com>
Date: Fri, 2 Aug 2024 07:31:09 +0200
Subject: [PATCH 2/4] Add more space above modal

---
 src/pages/workspace/expensifyCard/EmptyCardView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/expensifyCard/EmptyCardView.tsx b/src/pages/workspace/expensifyCard/EmptyCardView.tsx
index ace0b84165d8..a2da5de20424 100644
--- a/src/pages/workspace/expensifyCard/EmptyCardView.tsx
+++ b/src/pages/workspace/expensifyCard/EmptyCardView.tsx
@@ -39,7 +39,7 @@ function EmptyCardView() {
                     title={translate('workspace.expensifyCard.issueAndManageCards')}
                     subtitle={translate('workspace.expensifyCard.getStartedIssuing')}
                     emptyStateForegroundStyles={isSmallScreenWidth && {justifyContent: 'flex-start'}}
-                    minModalHeight={500}
+                    minModalHeight={540}
                 />
             </View>
             <Text style={[styles.textMicroSupporting, styles.m5]}>{translate('workspace.expensifyCard.disclaimer')}</Text>

From cba2cba4b6bda810e0d0dc4aa4fe0440a391afcc Mon Sep 17 00:00:00 2001
From: Filip Solecki <filip.solecki@swmansion.com>
Date: Fri, 2 Aug 2024 13:13:02 +0200
Subject: [PATCH 3/4] Fix padding of centered modal

---
 src/components/EmptyStateComponent/index.tsx        | 4 +---
 src/pages/workspace/expensifyCard/EmptyCardView.tsx | 2 +-
 src/styles/index.ts                                 | 8 ++++----
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index dd5d00e3ed04..e2b6b76748d7 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -8,7 +8,6 @@ import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import VideoPlayer from '@components/VideoPlayer';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
 import type {EmptyStateComponentProps, VideoLoadedEventType} from './types';
 
@@ -28,7 +27,6 @@ function EmptyStateComponent({
     minModalHeight = 400,
 }: EmptyStateComponentProps) {
     const styles = useThemeStyles();
-    const {isSmallScreenWidth} = useWindowDimensions();
     const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);
 
     const setAspectRatio = (event: VideoReadyForDisplayEvent | VideoLoadedEventType | undefined) => {
@@ -87,7 +85,7 @@ function EmptyStateComponent({
                     shouldAnimate={false}
                 />
             </View>
-            <View style={[styles.emptyStateForeground(isSmallScreenWidth), emptyStateForegroundStyles]}>
+            <View style={[styles.emptyStateForeground, emptyStateForegroundStyles]}>
                 <View style={styles.emptyStateContent}>
                     <View style={[styles.emptyStateHeader(headerMediaType === CONST.EMPTY_STATE_MEDIA.ILLUSTRATION), headerStyles]}>{HeaderComponent}</View>
                     <View style={styles.p8}>
diff --git a/src/pages/workspace/expensifyCard/EmptyCardView.tsx b/src/pages/workspace/expensifyCard/EmptyCardView.tsx
index a2da5de20424..ace0b84165d8 100644
--- a/src/pages/workspace/expensifyCard/EmptyCardView.tsx
+++ b/src/pages/workspace/expensifyCard/EmptyCardView.tsx
@@ -39,7 +39,7 @@ function EmptyCardView() {
                     title={translate('workspace.expensifyCard.issueAndManageCards')}
                     subtitle={translate('workspace.expensifyCard.getStartedIssuing')}
                     emptyStateForegroundStyles={isSmallScreenWidth && {justifyContent: 'flex-start'}}
-                    minModalHeight={540}
+                    minModalHeight={500}
                 />
             </View>
             <Text style={[styles.textMicroSupporting, styles.m5]}>{translate('workspace.expensifyCard.disclaimer')}</Text>
diff --git a/src/styles/index.ts b/src/styles/index.ts
index ef34fda8982d..6ce13f191300 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5114,13 +5114,13 @@ const styles = (theme: ThemeColors) =>
             flex: 1,
         },
 
-        emptyStateForeground: (isSmallScreenWidth: boolean) => ({
+        emptyStateForeground: {
+            padding: 32,
             justifyContent: 'center',
             alignItems: 'center',
             height: '100%',
-            padding: isSmallScreenWidth ? 32 : 0,
-            width: '100%',
-        }),
+            boxSizing: 'content-box',
+        },
 
         emptyStateContent: {
             backgroundColor: theme.cardBG,

From aca8eb10d6c90b12ea1581cb9c61146a227cb4e4 Mon Sep 17 00:00:00 2001
From: Filip Solecki <filip.solecki@swmansion.com>
Date: Tue, 6 Aug 2024 07:50:55 +0200
Subject: [PATCH 4/4] Fix after main merge

---
 src/styles/index.ts | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index cd7e67e0a08e..9be740868330 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5115,11 +5115,10 @@ const styles = (theme: ThemeColors) =>
         },
 
         emptyStateForeground: {
-            padding: 32,
+            margin: 32,
             justifyContent: 'center',
             alignItems: 'center',
-            height: '100%',
-            boxSizing: 'content-box',
+            flex: 1,
         },
 
         emptyStateContent: {