From cb9fd500410699c5f90312116595e074bc5385ed Mon Sep 17 00:00:00 2001
From: MelvinBot <infra+melvinbot@expensify.com>
Date: Thu, 12 Feb 2026 08:07:22 +0000
Subject: [PATCH 1/3] Add alignItemsCenter to buttons wrapper in
 EmptyStateComponent

Add styles.alignItemsCenter to the View wrapping empty state
buttons. This prevents single buttons (like "Add expense" on
new blank reports) from stretching to full width while keeping
multi-button layouts working correctly via flex: 1.

Co-authored-by: Shubham Agrawal <shubham1206agra@users.noreply.github.com>
---
 src/components/EmptyStateComponent/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index ced3a2025f0e..c130746ee214 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -112,7 +112,7 @@ function EmptyStateComponent({
                             ))}
                         {children}
                         {!isEmpty(buttons) && (
-                            <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : styles.flexColumn, styles.justifyContentCenter]}>
+                            <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : styles.flexColumn, styles.justifyContentCenter, styles.alignItemsCenter]}>
                                 {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled, style, dropDownOptions}) =>
                                     dropDownOptions ? (
                                         <ButtonWithDropdownMenu

From b79f79d89d5b4f8298e9bfd6f127630dc0643132 Mon Sep 17 00:00:00 2001
From: MelvinBot <infra+melvinbot@expensify.com>
Date: Thu, 12 Feb 2026 11:43:39 +0000
Subject: [PATCH 2/3] Apply alignItemsCenter only when there is a single button

Conditionally apply styles.alignItemsCenter to the buttons
container only when buttons.length === 1. This ensures single
buttons (like "Add expense" on empty reports) hug their content
width, while multi-button empty states (Tags, Categories) keep
their full-width stretch behavior on all layouts including narrow.

Co-authored-by: Shubham Agrawal <shubham1206agra@users.noreply.github.com>
---
 src/components/EmptyStateComponent/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index c130746ee214..11f052617acf 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -112,7 +112,7 @@ function EmptyStateComponent({
                             ))}
                         {children}
                         {!isEmpty(buttons) && (
-                            <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : styles.flexColumn, styles.justifyContentCenter, styles.alignItemsCenter]}>
+                            <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : styles.flexColumn, styles.justifyContentCenter, buttons?.length === 1 && styles.alignItemsCenter]}>
                                 {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled, style, dropDownOptions}) =>
                                     dropDownOptions ? (
                                         <ButtonWithDropdownMenu

From 25f31b9260f8f6b925bd4014a6b07b6a0e671cc5 Mon Sep 17 00:00:00 2001
From: MelvinBot <infra+melvinbot@expensify.com>
Date: Thu, 12 Feb 2026 11:54:33 +0000
Subject: [PATCH 3/3] Fix: Format EmptyStateComponent to pass Prettier check

Co-authored-by: Shawn Borton <shawnborton@users.noreply.github.com>
---
 src/components/EmptyStateComponent/index.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index 11f052617acf..cd08e73b5a7e 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -112,7 +112,15 @@ function EmptyStateComponent({
                             ))}
                         {children}
                         {!isEmpty(buttons) && (
-                            <View style={[styles.gap2, styles.mt5, !shouldUseNarrowLayout ? styles.flexRow : styles.flexColumn, styles.justifyContentCenter, buttons?.length === 1 && styles.alignItemsCenter]}>
+                            <View
+                                style={[
+                                    styles.gap2,
+                                    styles.mt5,
+                                    !shouldUseNarrowLayout ? styles.flexRow : styles.flexColumn,
+                                    styles.justifyContentCenter,
+                                    buttons?.length === 1 && styles.alignItemsCenter,
+                                ]}
+                            >
                                 {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled, style, dropDownOptions}) =>
                                     dropDownOptions ? (
                                         <ButtonWithDropdownMenu