From 01631ba618273d965c57f8a2604d8527bdc002ee Mon Sep 17 00:00:00 2001
From: "Abdelrahman Khattab (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Wed, 12 Aug 2026 15:45:25 +0000
Subject: [PATCH 1/3] Use 20px horizontal margin for Section cards to match
 standard spacing

Co-authored-by: Abdelrahman Khattab <abzokhattab@users.noreply.github.com>
---
 src/styles/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 14a493687db7..301199bc1d2e 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4118,7 +4118,7 @@ const staticStyles = (theme: ThemeColors) =>
             textAlign: 'left',
             overflow: 'hidden',
             marginBottom: 20,
-            marginHorizontal: variables.sectionMargin,
+            marginHorizontal: 20,
         },
 
         widgetContainer: {

From b7293f4dab3d7c547c07d190582efe09fece34d7 Mon Sep 17 00:00:00 2001
From: "Abdelrahman Khattab (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Wed, 12 Aug 2026 21:29:55 +0000
Subject: [PATCH 2/3] Bump sectionMargin to 20 so gutter and section max-width
 stay in sync

Set variables.sectionMargin to 20 and point cardSectionContainer.marginHorizontal
back at it, so workspaceSection.maxWidth (workspaceSectionMaxWidth + sectionMargin*2)
moves with the gutter and wide-layout cards stay at the 680 design width.
Pin chartHeader.marginBottom to 16 to keep its spacing unchanged.

Co-authored-by: abzokhattab <abzokhattab@users.noreply.github.com>
Co-authored-by: Abdelrahman Khattab <abzokhattab@users.noreply.github.com>
---
 src/styles/index.ts     | 4 ++--
 src/styles/variables.ts | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index 301199bc1d2e..32eb6264e4fc 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4118,7 +4118,7 @@ const staticStyles = (theme: ThemeColors) =>
             textAlign: 'left',
             overflow: 'hidden',
             marginBottom: 20,
-            marginHorizontal: 20,
+            marginHorizontal: variables.sectionMargin,
         },
 
         widgetContainer: {
@@ -6541,7 +6541,7 @@ const staticStyles = (theme: ThemeColors) =>
             flexDirection: 'row',
             alignItems: 'center',
             gap: variables.componentBorderRadius,
-            marginBottom: variables.sectionMargin,
+            marginBottom: 16,
         },
         chartTitle: {
             ...FontUtils.fontFamily.platform.EXP_NEUE_BOLD,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 604ee70150b1..b0868176e114 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -287,7 +287,7 @@ export default {
     modalRightDockedZIndex: 9997,
     modalLowestZIndex: 9996,
     workspaceTypeIconWidth: 34,
-    sectionMargin: 16,
+    sectionMargin: 20,
     workspaceSectionMaxWidth: 680,
     sectionIllustrationHeight: 220,
     tripsIllustrationW: 168,

From b5869e4d9fc864ca83eb528b107e63ec28d35d38 Mon Sep 17 00:00:00 2001
From: "Abdelrahman Khattab (via MelvinBot)" <infra+melvinbot@expensify.com>
Date: Mon, 17 Aug 2026 11:42:17 +0000
Subject: [PATCH 3/3] Remove extra 4px gutter on More Features section to match
 20px standard

Co-authored-by: Abdelrahman Khattab <abzokhattab@users.noreply.github.com>
---
 .../workspace/WorkspaceMoreFeaturesPage/MoreFeaturesSection.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/workspace/WorkspaceMoreFeaturesPage/MoreFeaturesSection.tsx b/src/pages/workspace/WorkspaceMoreFeaturesPage/MoreFeaturesSection.tsx
index 982b787cb2bd..0936cc05cc98 100644
--- a/src/pages/workspace/WorkspaceMoreFeaturesPage/MoreFeaturesSection.tsx
+++ b/src/pages/workspace/WorkspaceMoreFeaturesPage/MoreFeaturesSection.tsx
@@ -30,7 +30,7 @@ function MoreFeaturesSection({title, children}: MoreFeaturesSectionProps) {
     return (
         <View style={[styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : {}]}>
             <Section
-                containerStyles={[styles.ph1, styles.pv0, styles.bgTransparent, styles.noBorderRadius]}
+                containerStyles={[styles.ph0, styles.pv0, styles.bgTransparent, styles.noBorderRadius]}
                 childrenStyles={[styles.flexRow, styles.flexWrap, styles.columnGap3]}
                 renderTitle={() => (
                     <Text