From 7877b588606dafead24ccaafb568c55b86e91d8d Mon Sep 17 00:00:00 2001
From: staszekscp <mariusz.stanisz@swmansion.com>
Date: Tue, 19 Dec 2023 11:17:10 +0100
Subject: [PATCH] fix layout

---
 src/pages/workspace/bills/WorkspaceBillsPage.js         | 8 ++++++--
 src/pages/workspace/card/WorkspaceCardPage.js           | 7 +++++--
 src/pages/workspace/invoices/WorkspaceInvoicesPage.js   | 8 ++++++--
 src/pages/workspace/reimburse/WorkspaceReimburseView.js | 4 ++--
 src/pages/workspace/travel/WorkspaceTravelPage.js       | 8 ++++++--
 src/styles/index.ts                                     | 5 +++++
 src/styles/variables.ts                                 | 1 +
 7 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/pages/workspace/bills/WorkspaceBillsPage.js b/src/pages/workspace/bills/WorkspaceBillsPage.js
index c607071a4365..01c6cf03fe97 100644
--- a/src/pages/workspace/bills/WorkspaceBillsPage.js
+++ b/src/pages/workspace/bills/WorkspaceBillsPage.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import WorkspaceBillsNoVBAView from './WorkspaceBillsNoVBAView';
@@ -20,6 +22,8 @@ const propTypes = {
 };
 
 function WorkspaceBillsPage(props) {
+    const styles = useThemeStyles();
+
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -28,10 +32,10 @@ function WorkspaceBillsPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_BILLS}
         >
             {(hasVBA, policyID) => (
-                <>
+                <View style={[styles.workspaceSection, styles.mt6]}>
                     {!hasVBA && <WorkspaceBillsNoVBAView policyID={policyID} />}
                     {hasVBA && <WorkspaceBillsVBAView policyID={policyID} />}
-                </>
+                </View>
             )}
         </WorkspacePageWithSections>
     );
diff --git a/src/pages/workspace/card/WorkspaceCardPage.js b/src/pages/workspace/card/WorkspaceCardPage.js
index 55220b85ce63..2e2b6be80699 100644
--- a/src/pages/workspace/card/WorkspaceCardPage.js
+++ b/src/pages/workspace/card/WorkspaceCardPage.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import WorkspaceCardNoVBAView from './WorkspaceCardNoVBAView';
@@ -21,6 +23,7 @@ const propTypes = {
 };
 
 function WorkspaceCardPage(props) {
+    const styles = useThemeStyles();
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -29,13 +32,13 @@ function WorkspaceCardPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_CARD}
         >
             {(hasVBA, policyID, isUsingECard) => (
-                <>
+                <View style={[styles.workspaceSection, styles.mt6]}>
                     {!hasVBA && <WorkspaceCardNoVBAView policyID={policyID} />}
 
                     {hasVBA && !isUsingECard && <WorkspaceCardVBANoECardView />}
 
                     {hasVBA && isUsingECard && <WorkspaceCardVBAWithECardView />}
-                </>
+                </View>
             )}
         </WorkspacePageWithSections>
     );
diff --git a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
index 8bc0c4484100..9de83981a00a 100644
--- a/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
+++ b/src/pages/workspace/invoices/WorkspaceInvoicesPage.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import WorkspaceInvoicesNoVBAView from './WorkspaceInvoicesNoVBAView';
@@ -20,6 +22,8 @@ const propTypes = {
 };
 
 function WorkspaceInvoicesPage(props) {
+    const styles = useThemeStyles();
+
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -28,10 +32,10 @@ function WorkspaceInvoicesPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_INVOICES}
         >
             {(hasVBA, policyID) => (
-                <>
+                <View style={[styles.workspaceSection, styles.mt6]}>
                     {!hasVBA && <WorkspaceInvoicesNoVBAView policyID={policyID} />}
                     {hasVBA && <WorkspaceInvoicesVBAView policyID={policyID} />}
-                </>
+                </View>
             )}
         </WorkspacePageWithSections>
     );
diff --git a/src/pages/workspace/reimburse/WorkspaceReimburseView.js b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
index 23136064fc2b..678d03665b62 100644
--- a/src/pages/workspace/reimburse/WorkspaceReimburseView.js
+++ b/src/pages/workspace/reimburse/WorkspaceReimburseView.js
@@ -103,7 +103,7 @@ function WorkspaceReimburseView(props) {
     }, [props.policy.customUnits, getCurrentRatePerUnitLabel]);
 
     return (
-        <>
+        <View style={[styles.workspaceSection, styles.mt6]}>
             <Section
                 title={translate('workspace.reimburse.captureReceipts')}
                 icon={Illustrations.MoneyReceipts}
@@ -159,7 +159,7 @@ function WorkspaceReimburseView(props) {
                 network={props.network}
                 translate={translate}
             />
-        </>
+        </View>
     );
 }
 
diff --git a/src/pages/workspace/travel/WorkspaceTravelPage.js b/src/pages/workspace/travel/WorkspaceTravelPage.js
index a88e180cc7b6..c0633b51ac38 100644
--- a/src/pages/workspace/travel/WorkspaceTravelPage.js
+++ b/src/pages/workspace/travel/WorkspaceTravelPage.js
@@ -1,6 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import {View} from 'react-native';
 import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
+import useThemeStyles from '@hooks/useThemeStyles';
 import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
 import CONST from '@src/CONST';
 import WorkspaceTravelNoVBAView from './WorkspaceTravelNoVBAView';
@@ -20,6 +22,8 @@ const propTypes = {
 };
 
 function WorkspaceTravelPage(props) {
+    const styles = useThemeStyles();
+
     return (
         <WorkspacePageWithSections
             shouldUseScrollView
@@ -28,10 +32,10 @@ function WorkspaceTravelPage(props) {
             guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_TRAVEL}
         >
             {(hasVBA, policyID) => (
-                <>
+                <View style={[styles.workspaceSection, styles.mt6]}>
                     {!hasVBA && <WorkspaceTravelNoVBAView policyID={policyID} />}
                     {hasVBA && <WorkspaceTravelVBAView />}
-                </>
+                </View>
             )}
         </WorkspacePageWithSections>
     );
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 442d7942a9ec..9da606e1d975 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4139,6 +4139,11 @@ const styles = (theme: ThemeColors) =>
             lineHeight: variables.lineHeightXLarge,
         },
 
+        workspaceSection: {
+            maxWidth: variables.workspaceSectionMaxWidth,
+            alignSelf: 'center',
+        },
+
         aspectRatioLottie: (animation: DotLottieAnimation) => ({aspectRatio: animation.w / animation.h}),
 
         receiptDropHeaderGap: {
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 4e4d70dd3a07..b7fb0e7fbad8 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -179,6 +179,7 @@ export default {
     reportActionItemImagesMoreCornerTriangleWidth: 40,
     bankCardWidth: 40,
     bankCardHeight: 26,
+    workspaceSectionMaxWidth: 560,
 
     // The height of the empty list is 14px (2px for borders and 12px for vertical padding)
     // This is calculated based on the values specified in the 'getGoogleListViewStyle' function of the 'StyleUtils' utility