From 6a845558c5a7e3dc96c09d6ef4fdc35a2e8412f0 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Tue, 21 Jan 2025 00:22:12 +0530
Subject: [PATCH 1/9] use named imports

---
 .../workspace/WorkspaceMoreFeaturesPage.tsx   | 65 +++++++++++--------
 1 file changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index 6c6e70b8cc28..8d4f4ee9e44c 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -15,18 +15,29 @@ import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
 import useThemeStyles from '@hooks/useThemeStyles';
-import * as CardUtils from '@libs/CardUtils';
-import * as ErrorUtils from '@libs/ErrorUtils';
+import {getCompanyFeeds} from '@libs/CardUtils';
+import {getLatestErrorField} from '@libs/ErrorUtils';
 import Navigation from '@libs/Navigation/Navigation';
 import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
 import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
 import {getPerDiemCustomUnit, isControlPolicy} from '@libs/PolicyUtils';
-import * as Category from '@userActions/Policy/Category';
-import * as DistanceRate from '@userActions/Policy/DistanceRate';
-import * as PerDiem from '@userActions/Policy/PerDiem';
-import * as Policy from '@userActions/Policy/Policy';
-import * as Tag from '@userActions/Policy/Tag';
-import * as Report from '@userActions/Report';
+import {enablePolicyCategories} from '@userActions/Policy/Category';
+import {enablePolicyDistanceRates} from '@userActions/Policy/DistanceRate';
+import {enablePerDiem} from '@userActions/Policy/PerDiem';
+import {
+    clearPolicyErrorField,
+    enableCompanyCards,
+    enableExpensifyCard,
+    enablePolicyConnections,
+    enablePolicyInvoicing,
+    enablePolicyReportFields,
+    enablePolicyRules,
+    enablePolicyTaxes,
+    enablePolicyWorkflows,
+    openPolicyMoreFeaturesPage,
+} from '@userActions/Policy/Policy';
+import {enablePolicyTags} from '@userActions/Policy/Tag';
+import {navigateToConciergeChat} from '@userActions/Report';
 import CONST from '@src/CONST';
 import type {TranslationPaths} from '@src/languages/types';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -103,7 +114,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 if (!policyID) {
                     return;
                 }
-                DistanceRate.enablePolicyDistanceRates(policyID, isEnabled);
+                enablePolicyDistanceRates(policyID, isEnabled);
             },
         },
         {
@@ -117,7 +128,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 if (!policyID) {
                     return;
                 }
-                Policy.enableExpensifyCard(policyID, isEnabled);
+                enableExpensifyCard(policyID, isEnabled);
             },
             disabledAction: () => {
                 setIsDisableExpensifyCardWarningModalOpen(true);
@@ -131,7 +142,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
         subtitleTranslationKey: 'workspace.moreFeatures.companyCards.subtitle',
         isActive: policy?.areCompanyCardsEnabled ?? false,
         pendingAction: policy?.pendingFields?.areCompanyCardsEnabled,
-        disabled: !isEmptyObject(CardUtils.getCompanyFeeds(cardFeeds)),
+        disabled: !isEmptyObject(getCompanyFeeds(cardFeeds)),
         action: (isEnabled: boolean) => {
             if (!policyID) {
                 return;
@@ -140,7 +151,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.companyCards.alias, ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID)));
                 return;
             }
-            Policy.enableCompanyCards(policyID, isEnabled);
+            enableCompanyCards(policyID, isEnabled);
         },
         disabledAction: () => {
             setIsDisableCompanyCardsWarningModalOpen(true);
@@ -162,7 +173,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                     Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.perDiem.alias, ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID)));
                     return;
                 }
-                PerDiem.enablePerDiem(policyID, isEnabled, perDiemCustomUnit?.customUnitID);
+                enablePerDiem(policyID, isEnabled, perDiemCustomUnit?.customUnitID);
             },
         });
     }
@@ -178,7 +189,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 if (!policyID) {
                     return;
                 }
-                Policy.enablePolicyWorkflows(policyID, isEnabled);
+                enablePolicyWorkflows(policyID, isEnabled);
             },
         },
         {
@@ -196,7 +207,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                     Navigation.navigate(ROUTES.WORKSPACE_UPGRADE.getRoute(policyID, CONST.UPGRADE_FEATURE_INTRO_MAPPING.rules.alias, ROUTES.WORKSPACE_MORE_FEATURES.getRoute(policyID)));
                     return;
                 }
-                Policy.enablePolicyRules(policyID, isEnabled);
+                enablePolicyRules(policyID, isEnabled);
             },
         },
     ];
@@ -212,7 +223,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 if (!policyID) {
                     return;
                 }
-                Policy.enablePolicyInvoicing(policyID, isEnabled);
+                enablePolicyInvoicing(policyID, isEnabled);
             },
         },
     ];
@@ -230,7 +241,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 if (!policyID) {
                     return;
                 }
-                Category.enablePolicyCategories(policyID, isEnabled);
+                enablePolicyCategories(policyID, isEnabled);
             },
         },
         {
@@ -245,7 +256,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 if (!policyID) {
                     return;
                 }
-                Tag.enablePolicyTags(policyID, isEnabled);
+                enablePolicyTags(policyID, isEnabled);
             },
         },
         {
@@ -260,7 +271,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 if (!policyID) {
                     return;
                 }
-                Policy.enablePolicyTaxes(policyID, isEnabled);
+                enablePolicyTaxes(policyID, isEnabled);
             },
         },
         {
@@ -283,7 +294,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                         return;
                     }
 
-                    Policy.enablePolicyReportFields(policyID, true);
+                    enablePolicyReportFields(policyID, true);
                     return;
                 }
                 setIsReportFieldsWarningModalOpen(true);
@@ -308,15 +319,15 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 if (!policyID) {
                     return;
                 }
-                Policy.enablePolicyConnections(policyID, isEnabled);
+                enablePolicyConnections(policyID, isEnabled);
             },
             disabled: hasAccountingConnection,
-            errors: ErrorUtils.getLatestErrorField(policy ?? {}, CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED),
+            errors: getLatestErrorField(policy ?? {}, CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED),
             onCloseError: () => {
                 if (!policyID) {
                     return;
                 }
-                Policy.clearPolicyErrorField(policyID, CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED);
+                clearPolicyErrorField(policyID, CONST.POLICY.MORE_FEATURES.ARE_CONNECTIONS_ENABLED);
             },
         },
     ];
@@ -396,7 +407,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
     );
 
     const fetchFeatures = useCallback(() => {
-        Policy.openPolicyMoreFeaturesPage(route.params.policyID);
+        openPolicyMoreFeaturesPage(route.params.policyID);
     }, [route.params.policyID]);
 
     useNetwork({onReconnect: fetchFeatures});
@@ -470,7 +481,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                             return;
                         }
                         setIsReportFieldsWarningModalOpen(false);
-                        Policy.enablePolicyReportFields(policyID, false);
+                        enablePolicyReportFields(policyID, false);
                     }}
                     onCancel={() => setIsReportFieldsWarningModalOpen(false)}
                     prompt={translate('workspace.reportFields.disableReportFieldsConfirmation')}
@@ -483,7 +494,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                     isVisible={isDisableExpensifyCardWarningModalOpen}
                     onConfirm={() => {
                         setIsDisableExpensifyCardWarningModalOpen(false);
-                        Report.navigateToConciergeChat(true);
+                        navigateToConciergeChat(true);
                     }}
                     onCancel={() => setIsDisableExpensifyCardWarningModalOpen(false)}
                     prompt={translate('workspace.moreFeatures.expensifyCard.disableCardPrompt')}
@@ -495,7 +506,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                     isVisible={isDisableCompanyCardsWarningModalOpen}
                     onConfirm={() => {
                         setIsDisableCompanyCardsWarningModalOpen(false);
-                        Report.navigateToConciergeChat(true);
+                        navigateToConciergeChat(true);
                     }}
                     onCancel={() => setIsDisableCompanyCardsWarningModalOpen(false)}
                     prompt={translate('workspace.moreFeatures.companyCards.disableCardPrompt')}

From e3e033f08b1ae35bfef204957c726869f1d51860 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Tue, 21 Jan 2025 23:36:46 +0530
Subject: [PATCH 2/9] New WorkspaceMore features page design

---
 .../workspace/WorkspaceMoreFeaturesPage.tsx   | 36 ++++++++++++++-----
 src/styles/index.ts                           | 13 +++++++
 src/styles/utils/spacing.ts                   |  4 +++
 3 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index 8d4f4ee9e44c..80b33d962c40 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -14,6 +14,7 @@ import useNetwork from '@hooks/useNetwork';
 import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
+import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getCompanyFeeds} from '@libs/CardUtils';
 import {getLatestErrorField} from '@libs/ErrorUtils';
@@ -73,6 +74,7 @@ type SectionObject = {
 };
 
 function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPageProps) {
+    const theme = useTheme();
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets();
@@ -364,7 +366,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
         (item: Item) => (
             <View
                 key={item.titleTranslationKey}
-                style={styles.mt7}
+                style={styles.workspaceSectionMoreFeaturesItem}
             >
                 <ToggleSettingOptionRow
                     icon={item.icon}
@@ -386,24 +388,44 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
         [styles, translate],
     );
 
+    /** Used to fill row space in the Section items when there are odd number of items to create equal margins for last odd item. */
+    const sectionRowFillerItem = useCallback(
+        (section: SectionObject) => {
+            if (section.items.length % 2 === 0) {
+                return null;
+            }
+
+            return (
+                <View
+                    key="section-filler-col"
+                    aria-hidden
+                    accessibilityElementsHidden
+                    style={[styles.workspaceSectionMoreFeaturesItem, styles.p0, styles.m0, styles.visibilityHidden, styles.bgTransparent]}
+                />
+            );
+        },
+        [styles],
+    );
+
     const renderSection = useCallback(
         (section: SectionObject) => (
             <View
                 key={section.titleTranslationKey}
-                style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}
+                style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : {}]}
             >
                 <Section
-                    containerStyles={shouldUseNarrowLayout ? styles.p5 : styles.p8}
+                    containerStyles={[styles.ph1, styles.pv0, styles.bgTransparent]}
+                    childrenStyles={[styles.flexRow, styles.flexWrap, styles.columnGap5]}
                     title={translate(section.titleTranslationKey)}
                     titleStyles={styles.textStrong}
-                    subtitle={translate(section.subtitleTranslationKey)}
                     subtitleMuted
                 >
                     {section.items.map(renderItem)}
+                    {sectionRowFillerItem(section)}
                 </Section>
             </View>
         ),
-        [shouldUseNarrowLayout, styles, renderItem, translate],
+        [shouldUseNarrowLayout, styles, renderItem, translate, sectionRowFillerItem],
     );
 
     const fetchFeatures = useCallback(() => {
@@ -437,9 +459,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 />
 
                 <ScrollView contentContainerStyle={safeAreaPaddingBottomStyle}>
-                    <Text style={[styles.ph5, styles.mb4, styles.mt3, styles.textSupporting, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>
-                        {translate('workspace.moreFeatures.subtitle')}
-                    </Text>
+                    <Text style={[styles.ph5, styles.mb4, styles.mt3, styles.textSupporting, styles.workspaceSectionMobile]}>{translate('workspace.moreFeatures.subtitle')}</Text>
                     {sections.map(renderSection)}
                 </ScrollView>
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index dbae34f440af..69aed39645a5 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4918,6 +4918,19 @@ const styles = (theme: ThemeColors) =>
             alignSelf: 'center',
         },
 
+        workspaceSectionMoreFeaturesItem: {
+            backgroundColor: theme.cardBG,
+            borderRadius: variables.componentBorderRadiusLarge,
+            paddingHorizontal: 16,
+            paddingVertical: 20,
+            minWidth: 350,
+            flexGrow: 1,
+            flexShrink: 1,
+            // Choosing a lowest value just above the threshold for the items to adjust width against the various screens. Only 2 items are shown 35 * 2 = 70 thus third item of 35% width can't fit forcing a two column layout.
+            flexBasis: '35%',
+            marginTop: 20,
+        },
+
         aspectRatioLottie: (animation: DotLottieAnimation) => ({aspectRatio: animation.w / animation.h}),
 
         receiptDropHeaderGap: {
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
index fd0a3a3cabc7..faf8df756378 100644
--- a/src/styles/utils/spacing.ts
+++ b/src/styles/utils/spacing.ts
@@ -717,6 +717,10 @@ export default {
         rowGap: 16,
     },
 
+    columnGap5: {
+        columnGap: 20,
+    },
+
     minHeight5: {
         minHeight: 20,
     },

From 37ce87f8447022b2a32c44edf826fd4d3758a010 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Tue, 21 Jan 2025 23:38:13 +0530
Subject: [PATCH 3/9] More design changes

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

diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index 80b33d962c40..5d589e16a452 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -400,7 +400,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                     key="section-filler-col"
                     aria-hidden
                     accessibilityElementsHidden
-                    style={[styles.workspaceSectionMoreFeaturesItem, styles.p0, styles.m0, styles.visibilityHidden, styles.bgTransparent]}
+                    style={[styles.workspaceSectionMoreFeaturesItem, styles.p0, styles.mt0, styles.visibilityHidden, styles.bgTransparent]}
                 />
             );
         },

From 741b176d516a15cc84c84a3245ce1e032125c42d Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Tue, 21 Jan 2025 23:40:34 +0530
Subject: [PATCH 4/9] change position of sections

---
 .../workspace/WorkspaceMoreFeaturesPage.tsx   | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index 5d589e16a452..195ae7f5e8db 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -340,6 +340,16 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
             subtitleTranslationKey: 'workspace.moreFeatures.spendSection.subtitle',
             items: spendItems,
         },
+        {
+            titleTranslationKey: 'workspace.moreFeatures.integrateSection.title',
+            subtitleTranslationKey: 'workspace.moreFeatures.integrateSection.subtitle',
+            items: integrateItems,
+        },
+        {
+            titleTranslationKey: 'workspace.moreFeatures.organizeSection.title',
+            subtitleTranslationKey: 'workspace.moreFeatures.organizeSection.subtitle',
+            items: organizeItems,
+        },
         {
             titleTranslationKey: 'workspace.moreFeatures.manageSection.title',
             subtitleTranslationKey: 'workspace.moreFeatures.manageSection.subtitle',
@@ -350,16 +360,6 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
             subtitleTranslationKey: 'workspace.moreFeatures.earnSection.subtitle',
             items: earnItems,
         },
-        {
-            titleTranslationKey: 'workspace.moreFeatures.organizeSection.title',
-            subtitleTranslationKey: 'workspace.moreFeatures.organizeSection.subtitle',
-            items: organizeItems,
-        },
-        {
-            titleTranslationKey: 'workspace.moreFeatures.integrateSection.title',
-            subtitleTranslationKey: 'workspace.moreFeatures.integrateSection.subtitle',
-            items: integrateItems,
-        },
     ];
 
     const renderItem = useCallback(

From 5d41dbda3e69216d8da121862f67c8e802112694 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Tue, 21 Jan 2025 23:41:09 +0530
Subject: [PATCH 5/9] Remove extra import

---
 src/pages/workspace/WorkspaceMoreFeaturesPage.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index 195ae7f5e8db..a0fa446370c6 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -14,7 +14,6 @@ import useNetwork from '@hooks/useNetwork';
 import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
-import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getCompanyFeeds} from '@libs/CardUtils';
 import {getLatestErrorField} from '@libs/ErrorUtils';
@@ -74,7 +73,6 @@ type SectionObject = {
 };
 
 function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPageProps) {
-    const theme = useTheme();
     const styles = useThemeStyles();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets();

From 30a5c845f1d009dd824fe6d1a033c3d1293de214 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Wed, 22 Jan 2025 01:39:14 +0530
Subject: [PATCH 6/9] Fix Spacing

---
 src/pages/workspace/WorkspaceMoreFeaturesPage.tsx | 4 ++--
 src/styles/index.ts                               | 4 ++--
 src/styles/utils/spacing.ts                       | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index a0fa446370c6..2752ecd09470 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -413,7 +413,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
             >
                 <Section
                     containerStyles={[styles.ph1, styles.pv0, styles.bgTransparent]}
-                    childrenStyles={[styles.flexRow, styles.flexWrap, styles.columnGap5]}
+                    childrenStyles={[styles.flexRow, styles.flexWrap, styles.columnGap3]}
                     title={translate(section.titleTranslationKey)}
                     titleStyles={styles.textStrong}
                     subtitleMuted
@@ -457,7 +457,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 />
 
                 <ScrollView contentContainerStyle={safeAreaPaddingBottomStyle}>
-                    <Text style={[styles.ph5, styles.mb4, styles.mt3, styles.textSupporting, styles.workspaceSectionMobile]}>{translate('workspace.moreFeatures.subtitle')}</Text>
+                    <Text style={[styles.ph5, styles.mb5, styles.mt3, styles.textSupporting, styles.workspaceSectionMobile]}>{translate('workspace.moreFeatures.subtitle')}</Text>
                     {sections.map(renderSection)}
                 </ScrollView>
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 69aed39645a5..85aae20a18a2 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4920,7 +4920,7 @@ const styles = (theme: ThemeColors) =>
 
         workspaceSectionMoreFeaturesItem: {
             backgroundColor: theme.cardBG,
-            borderRadius: variables.componentBorderRadiusLarge,
+            borderRadius: variables.componentBorderRadiusNormal,
             paddingHorizontal: 16,
             paddingVertical: 20,
             minWidth: 350,
@@ -4928,7 +4928,7 @@ const styles = (theme: ThemeColors) =>
             flexShrink: 1,
             // Choosing a lowest value just above the threshold for the items to adjust width against the various screens. Only 2 items are shown 35 * 2 = 70 thus third item of 35% width can't fit forcing a two column layout.
             flexBasis: '35%',
-            marginTop: 20,
+            marginTop: 12,
         },
 
         aspectRatioLottie: (animation: DotLottieAnimation) => ({aspectRatio: animation.w / animation.h}),
diff --git a/src/styles/utils/spacing.ts b/src/styles/utils/spacing.ts
index faf8df756378..894542fcae0c 100644
--- a/src/styles/utils/spacing.ts
+++ b/src/styles/utils/spacing.ts
@@ -717,8 +717,8 @@ export default {
         rowGap: 16,
     },
 
-    columnGap5: {
-        columnGap: 20,
+    columnGap3: {
+        columnGap: 12,
     },
 
     minHeight5: {

From 73a998c650a5caa288befc3d83d3d89c5da21b97 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Wed, 22 Jan 2025 14:21:04 +0530
Subject: [PATCH 7/9] Force single column layout on Narrow screens

---
 src/pages/workspace/WorkspaceMoreFeaturesPage.tsx | 4 ++--
 src/styles/utils/flex.ts                          | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index 2752ecd09470..27fca65728a9 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -364,7 +364,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
         (item: Item) => (
             <View
                 key={item.titleTranslationKey}
-                style={styles.workspaceSectionMoreFeaturesItem}
+                style={[styles.workspaceSectionMoreFeaturesItem, shouldUseNarrowLayout && styles.flexBasis100]}
             >
                 <ToggleSettingOptionRow
                     icon={item.icon}
@@ -383,7 +383,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 />
             </View>
         ),
-        [styles, translate],
+        [styles, shouldUseNarrowLayout, translate],
     );
 
     /** Used to fill row space in the Section items when there are odd number of items to create equal margins for last odd item. */
diff --git a/src/styles/utils/flex.ts b/src/styles/utils/flex.ts
index 4db09f138535..f5df6eef8739 100644
--- a/src/styles/utils/flex.ts
+++ b/src/styles/utils/flex.ts
@@ -137,6 +137,10 @@ export default {
         flexBasis: 'auto',
     },
 
+    flexBasis100: {
+        flexBasis: '100%',
+    },
+
     flexBasis0: {
         flexBasis: 0,
     },

From e88b0fd9b55be743232cc5a754b349275c3edff6 Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Wed, 22 Jan 2025 14:30:55 +0530
Subject: [PATCH 8/9] Update section title styles

---
 src/pages/workspace/WorkspaceMoreFeaturesPage.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index 27fca65728a9..c2e8baf93a96 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -412,10 +412,9 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : {}]}
             >
                 <Section
-                    containerStyles={[styles.ph1, styles.pv0, styles.bgTransparent]}
+                    containerStyles={[styles.ph1, styles.pv0, styles.bgTransparent, styles.noBorderRadius]}
                     childrenStyles={[styles.flexRow, styles.flexWrap, styles.columnGap3]}
-                    title={translate(section.titleTranslationKey)}
-                    titleStyles={styles.textStrong}
+                    renderTitle={() => <Text style={styles.mutedNormalTextLabel}>{translate(section.titleTranslationKey)}</Text>}
                     subtitleMuted
                 >
                     {section.items.map(renderItem)}

From a90e93158c62229ffd530f6f205d3e966f9c7d4f Mon Sep 17 00:00:00 2001
From: Rajat Parashar <parasharrajat@users.noreply.github.com>
Date: Wed, 22 Jan 2025 19:02:08 +0530
Subject: [PATCH 9/9] MinWidth issue fix for small screen devices

---
 .../workspace/WorkspaceMoreFeaturesPage.tsx     | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
index c2e8baf93a96..c9836a31f7b8 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage.tsx
@@ -14,6 +14,7 @@ import useNetwork from '@hooks/useNetwork';
 import usePermissions from '@hooks/usePermissions';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useStyledSafeAreaInsets from '@hooks/useStyledSafeAreaInsets';
+import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {getCompanyFeeds} from '@libs/CardUtils';
 import {getLatestErrorField} from '@libs/ErrorUtils';
@@ -74,6 +75,7 @@ type SectionObject = {
 
 function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPageProps) {
     const styles = useThemeStyles();
+    const stylesutils = useStyleUtils();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const {safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets();
     const {translate} = useLocalize();
@@ -364,7 +366,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
         (item: Item) => (
             <View
                 key={item.titleTranslationKey}
-                style={[styles.workspaceSectionMoreFeaturesItem, shouldUseNarrowLayout && styles.flexBasis100]}
+                style={[styles.workspaceSectionMoreFeaturesItem, shouldUseNarrowLayout && styles.flexBasis100, shouldUseNarrowLayout && stylesutils.getMinimumWidth(0)]}
             >
                 <ToggleSettingOptionRow
                     icon={item.icon}
@@ -383,7 +385,7 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                 />
             </View>
         ),
-        [styles, shouldUseNarrowLayout, translate],
+        [styles, stylesutils, shouldUseNarrowLayout, translate],
     );
 
     /** Used to fill row space in the Section items when there are odd number of items to create equal margins for last odd item. */
@@ -398,11 +400,18 @@ function WorkspaceMoreFeaturesPage({policy, route}: WorkspaceMoreFeaturesPagePro
                     key="section-filler-col"
                     aria-hidden
                     accessibilityElementsHidden
-                    style={[styles.workspaceSectionMoreFeaturesItem, styles.p0, styles.mt0, styles.visibilityHidden, styles.bgTransparent]}
+                    style={[
+                        styles.workspaceSectionMoreFeaturesItem,
+                        shouldUseNarrowLayout && stylesutils.getMinimumWidth(0),
+                        styles.p0,
+                        styles.mt0,
+                        styles.visibilityHidden,
+                        styles.bgTransparent,
+                    ]}
                 />
             );
         },
-        [styles],
+        [styles, stylesutils, shouldUseNarrowLayout],
     );
 
     const renderSection = useCallback(
