From f85ed522e7907338b5b608e440ebdf8c591a7a3e Mon Sep 17 00:00:00 2001
From: aroravaibhav <arora221b@gmail.com>
Date: Mon, 23 Feb 2026 19:30:32 +0530
Subject: [PATCH 1/4] fix: Empty Component button width

---
 src/components/EmptyStateComponent/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index 1c974808ab4f0..abe259a594150 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -127,7 +127,7 @@ function EmptyStateComponent({
                                             customText={buttonText}
                                             options={dropDownOptions}
                                             isSplitButton={false}
-                                            style={[styles.flex1, style]}
+                                            style={[styles.flex1, style, buttons.length === 1 && styles.alignItemsCenter]}
                                         />
                                     ) : (
                                         <Button
@@ -138,7 +138,7 @@ function EmptyStateComponent({
                                             icon={icon}
                                             large
                                             isDisabled={isDisabled}
-                                            style={[styles.flex1, style]}
+                                            style={[styles.flex1, style, buttons.length === 1 && styles.alignItemsCenter]}
                                         />
                                     ),
                                 )}

From 9e6ff81dc0febfcb97b35c71c8a03c8941ab14eb Mon Sep 17 00:00:00 2001
From: aroravaibhav <arora221b@gmail.com>
Date: Tue, 24 Feb 2026 23:23:22 +0530
Subject: [PATCH 2/4] refactor: Extract singleButtonStyle to eliminate code
 duplication

---
 src/components/EmptyStateComponent/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index abe259a594150..1f702e70ca0bd 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -39,6 +39,7 @@ function EmptyStateComponent({
     const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO);
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const doesSubtitleContainCustomEmojiAndMore = containsCustomEmoji(subtitle ?? '') && !containsOnlyCustomEmoji(subtitle ?? '');
+    const singleButtonStyle = buttons?.length === 1 && styles.alignItemsCenter;
 
     const setAspectRatio = (event: SourceLoadEventPayload) => {
         const track = event.availableVideoTracks.at(0);
@@ -127,7 +128,7 @@ function EmptyStateComponent({
                                             customText={buttonText}
                                             options={dropDownOptions}
                                             isSplitButton={false}
-                                            style={[styles.flex1, style, buttons.length === 1 && styles.alignItemsCenter]}
+                                            style={[styles.flex1, style, singleButtonStyle]}
                                         />
                                     ) : (
                                         <Button
@@ -138,7 +139,7 @@ function EmptyStateComponent({
                                             icon={icon}
                                             large
                                             isDisabled={isDisabled}
-                                            style={[styles.flex1, style, buttons.length === 1 && styles.alignItemsCenter]}
+                                            style={[styles.flex1, style, singleButtonStyle]}
                                         />
                                     ),
                                 )}

From 85e5585e1328ee399e71c329bda66c0be22d504b Mon Sep 17 00:00:00 2001
From: webbygit <52284844+webbygit@users.noreply.github.com>
Date: Tue, 3 Mar 2026 15:54:07 +0530
Subject: [PATCH 3/4] added missed style

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

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index 1f702e70ca0bd..89e24d42ed89c 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -128,7 +128,7 @@ function EmptyStateComponent({
                                             customText={buttonText}
                                             options={dropDownOptions}
                                             isSplitButton={false}
-                                            style={[styles.flex1, style, singleButtonStyle]}
+                                            style={[styles.flex1, singleButtonStyle, style]}
                                         />
                                     ) : (
                                         <Button
@@ -139,7 +139,7 @@ function EmptyStateComponent({
                                             icon={icon}
                                             large
                                             isDisabled={isDisabled}
-                                            style={[styles.flex1, style, singleButtonStyle]}
+                                            style={[styles.flex1, singleButtonStyle, style]}
                                         />
                                     ),
                                 )}

From e5ebeb2e193cb0290345ed2e225713b48ad01e83 Mon Sep 17 00:00:00 2001
From: aroravaibhav <arora221b@gmail.com>
Date: Fri, 6 Mar 2026 18:50:43 +0530
Subject: [PATCH 4/4] refactor: reverted to large buttons and columns on narrow

---
 src/components/EmptyStateComponent/index.tsx | 23 +++++++++++++++++---
 src/styles/utils/sizing.ts                   |  4 ++++
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx
index e9936cbe83f17..7b82691ef8056 100644
--- a/src/components/EmptyStateComponent/index.tsx
+++ b/src/components/EmptyStateComponent/index.tsx
@@ -5,6 +5,7 @@ import Button from '@components/Button';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import ImageSVG from '@components/ImageSVG';
 import Text from '@components/Text';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {containsCustomEmoji, containsOnlyCustomEmoji} from '@libs/EmojiUtils';
 import TextWithEmojiFragment from '@pages/inbox/report/comment/TextWithEmojiFragment';
@@ -27,7 +28,9 @@ function EmptyStateComponent({
     subtitleText,
 }: EmptyStateComponentProps) {
     const styles = useThemeStyles();
+    const {shouldUseNarrowLayout} = useResponsiveLayout();
     const doesSubtitleContainCustomEmojiAndMore = containsCustomEmoji(subtitle ?? '') && !containsOnlyCustomEmoji(subtitle ?? '');
+    const hasMultipleButtons = buttons && buttons.length > 1;
 
     const HeaderComponent = useMemo(
         () => (
@@ -62,7 +65,20 @@ function EmptyStateComponent({
                             ))}
                         {children}
                         {!isEmpty(buttons) && (
-                            <View style={[styles.gap2, styles.mt6, styles.flexRow, styles.flexWrap, styles.justifyContentCenter]}>
+                            <View
+                                style={[
+                                    styles.gap2,
+                                    styles.mt6,
+                                    shouldUseNarrowLayout ? styles.flexColumn : styles.flexRow,
+                                    shouldUseNarrowLayout ? styles.ph5 : styles.ph8,
+                                    styles.flexWrap,
+                                    styles.justifyContentCenter,
+                                    styles.alignItemsCenter,
+                                    styles.mw400p,
+                                    styles.alignSelfCenter,
+                                    (hasMultipleButtons || !shouldUseNarrowLayout) && styles.w100,
+                                ]}
+                            >
                                 {buttons?.map(({buttonText, buttonAction, success, icon, isDisabled, style, dropDownOptions}) =>
                                     dropDownOptions ? (
                                         <ButtonWithDropdownMenu
@@ -72,7 +88,7 @@ function EmptyStateComponent({
                                             customText={buttonText}
                                             options={dropDownOptions}
                                             isSplitButton={false}
-                                            style={style}
+                                            style={[hasMultipleButtons && (shouldUseNarrowLayout ? styles.w100 : styles.flex1), style]}
                                         />
                                     ) : (
                                         <Button
@@ -81,8 +97,9 @@ function EmptyStateComponent({
                                             onPress={buttonAction}
                                             text={buttonText}
                                             icon={icon}
+                                            large
                                             isDisabled={isDisabled}
-                                            style={style}
+                                            style={[hasMultipleButtons && (shouldUseNarrowLayout ? styles.w100 : styles.flex1), style]}
                                         />
                                     ),
                                 )}
diff --git a/src/styles/utils/sizing.ts b/src/styles/utils/sizing.ts
index 2940585f8fe83..d71d1b730f42c 100644
--- a/src/styles/utils/sizing.ts
+++ b/src/styles/utils/sizing.ts
@@ -151,6 +151,10 @@ export default {
         maxWidth: '100%',
     },
 
+    mw400p: {
+        maxWidth: 400,
+    },
+
     wAuto: {
         width: 'auto',
     },