From 115756216748659adea9d2482e94451eb1f57993 Mon Sep 17 00:00:00 2001
From: Shawn Borton <shawn@expensify.com>
Date: Wed, 12 Aug 2026 21:35:17 -0400
Subject: [PATCH] Facelift: inset illustration in card section headers and
 match Travel card height

---
 src/components/Section/index.tsx                |  1 +
 src/pages/workspace/travel/GetStartedTravel.tsx |  2 +-
 src/pages/workspace/travel/ReviewingRequest.tsx |  2 +-
 src/styles/index.ts                             | 11 ++++++++++-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/Section/index.tsx b/src/components/Section/index.tsx
index 8f8e538e5dba..1b97c265b8d7 100644
--- a/src/components/Section/index.tsx
+++ b/src/components/Section/index.tsx
@@ -162,6 +162,7 @@ function Section({
                         styles.alignItemsCenter,
                         styles.justifyContentCenter,
                         StyleUtils.getBackgroundColorStyle(illustrationBackgroundColor ?? lottieIllustration?.backgroundColor ?? theme.appBG),
+                        styles.cardSectionIllustrationInset,
                         illustrationContainerStyle,
                     ]}
                 >
diff --git a/src/pages/workspace/travel/GetStartedTravel.tsx b/src/pages/workspace/travel/GetStartedTravel.tsx
index 58eb1b2faad2..9bf63837b79f 100644
--- a/src/pages/workspace/travel/GetStartedTravel.tsx
+++ b/src/pages/workspace/travel/GetStartedTravel.tsx
@@ -34,7 +34,7 @@ function GetStartedTravel({policyID, canWriteTravelFeature, showReadOnlyModal}:
             illustrationBackgroundColor={colors.tangerine700}
             illustration={illustrations.PendingTravel}
             illustrationStyle={styles.travelCardIllustration}
-            illustrationContainerStyle={[styles.emptyStateCardIllustrationContainer, styles.justifyContentCenter]}
+            illustrationContainerStyle={[styles.emptyStateCardIllustrationContainer, styles.justifyContentCenter, styles.cardSectionIllustrationContainer]}
             titleStyles={styles.textHeadlineH1}
             footer={
                 canWriteTravelFeature ? (
diff --git a/src/pages/workspace/travel/ReviewingRequest.tsx b/src/pages/workspace/travel/ReviewingRequest.tsx
index 230d1f02263e..86e845050b51 100644
--- a/src/pages/workspace/travel/ReviewingRequest.tsx
+++ b/src/pages/workspace/travel/ReviewingRequest.tsx
@@ -33,7 +33,7 @@ function ReviewingRequest() {
             illustrationBackgroundColor={colors.tangerine700}
             illustration={illustrations.PendingTravel}
             illustrationStyle={styles.travelCardIllustration}
-            illustrationContainerStyle={[styles.emptyStateCardIllustrationContainer, styles.justifyContentCenter]}
+            illustrationContainerStyle={[styles.emptyStateCardIllustrationContainer, styles.justifyContentCenter, styles.cardSectionIllustrationContainer]}
             titleStyles={styles.textHeadlineH1}
         />
     );
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 36eacc5c3372..a6683a7fbbec 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -4248,6 +4248,15 @@ const staticStyles = (theme: ThemeColors) =>
             height: variables.sectionIllustrationHeight,
         },
 
+        cardSectionIllustrationInset: {
+            width: 'auto',
+            alignSelf: 'stretch',
+            marginTop: 12,
+            marginHorizontal: 12,
+            borderRadius: variables.componentBorderRadiusNormal,
+            overflow: 'hidden',
+        },
+
         twoFAIllustration: {
             width: 'auto',
             height: 140,
@@ -7002,7 +7011,7 @@ const dynamicStyles = (theme: ThemeColors) =>
 
         getEmptyStateCompanyCardsIllustrationContainer: (shouldUseNarrowLayout: boolean) => (shouldUseNarrowLayout ? {height: 220} : {aspectRatio: 680 / 220}),
 
-        getEmptyStateCompanyCardsIllustration: (shouldUseNarrowLayout: boolean) => (shouldUseNarrowLayout ? {width: 680, height: 220} : {}),
+        getEmptyStateCompanyCardsIllustration: (shouldUseNarrowLayout: boolean) => (shouldUseNarrowLayout ? {width: 680, height: 220} : {width: '100%', height: '100%'}),
 
         searchListContentContainerStyles: (hasFilterBars: boolean) => ({
             paddingTop: hasFilterBars ? variables.searchListContentWithFiltersMarginTop : variables.searchListContentMarginTop,