From 220d45be486ad823931d93e28aff5c56a6d42ec2 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Thu, 25 Jan 2024 11:21:24 +0700
Subject: [PATCH 1/3] change style of header skeleton view to match with
 HeaderWithBackButton

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

diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index 8b8bb721a5dc..6bf993ffabdc 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -24,12 +24,12 @@ function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = ()
     const {isSmallScreenWidth} = useWindowDimensions();
 
     return (
-        <View style={[styles.appContentHeader]}>
+        <View style={[styles.appContentHeader, isSmallScreenWidth && styles.pl2]}>
             <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
                 {isSmallScreenWidth && (
                     <PressableWithFeedback
                         onPress={onBackButtonPress}
-                        style={[styles.LHNToggle]}
+                        style={[styles.touchableButtonImage]}
                         role={CONST.ROLE.BUTTON}
                         accessibilityLabel={translate('common.back')}
                     >

From f1ab769edc47d36757e432f87e33aef76b513ed7 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Sun, 28 Jan 2024 21:33:36 +0700
Subject: [PATCH 2/3] consist left space of back button

---
 src/components/HeaderWithBackButton/index.tsx | 4 ++--
 src/components/ReportHeaderSkeletonView.tsx   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
index a0f24b06db7f..ad8e13590cc5 100755
--- a/src/components/HeaderWithBackButton/index.tsx
+++ b/src/components/HeaderWithBackButton/index.tsx
@@ -70,7 +70,7 @@ function HeaderWithBackButton({
             // Hover on some part of close icons will not work on Electron if dragArea is true
             // https://github.com/Expensify/App/issues/29598
             dataSet={{dragArea: false}}
-            style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton && styles.pl2, shouldOverlay && StyleSheet.absoluteFillObject]}
+            style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton && styles.pl0,  shouldOverlay && StyleSheet.absoluteFillObject]}
         >
             <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
                 {shouldShowBackButton && (
@@ -87,7 +87,7 @@ function HeaderWithBackButton({
                                     onBackButtonPress();
                                 }
                             }}
-                            style={[styles.touchableButtonImage]}
+                            style={[styles.LHNToggle]}
                             role="button"
                             accessibilityLabel={translate('common.back')}
                             nativeID={CONST.BACK_BUTTON_NATIVE_ID}
diff --git a/src/components/ReportHeaderSkeletonView.tsx b/src/components/ReportHeaderSkeletonView.tsx
index 6bf993ffabdc..8b8bb721a5dc 100644
--- a/src/components/ReportHeaderSkeletonView.tsx
+++ b/src/components/ReportHeaderSkeletonView.tsx
@@ -24,12 +24,12 @@ function ReportHeaderSkeletonView({shouldAnimate = true, onBackButtonPress = ()
     const {isSmallScreenWidth} = useWindowDimensions();
 
     return (
-        <View style={[styles.appContentHeader, isSmallScreenWidth && styles.pl2]}>
+        <View style={[styles.appContentHeader]}>
             <View style={[styles.appContentHeaderTitle, !isSmallScreenWidth && styles.pl5]}>
                 {isSmallScreenWidth && (
                     <PressableWithFeedback
                         onPress={onBackButtonPress}
-                        style={[styles.touchableButtonImage]}
+                        style={[styles.LHNToggle]}
                         role={CONST.ROLE.BUTTON}
                         accessibilityLabel={translate('common.back')}
                     >

From 863f4f061ae632e6d648c5a4269aa94413072816 Mon Sep 17 00:00:00 2001
From: dukenv0307 <dukenv0307@gmail.com>
Date: Mon, 29 Jan 2024 17:33:46 +0700
Subject: [PATCH 3/3] fix lint

---
 src/components/HeaderWithBackButton/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx
index ad8e13590cc5..ce46808664d1 100755
--- a/src/components/HeaderWithBackButton/index.tsx
+++ b/src/components/HeaderWithBackButton/index.tsx
@@ -70,7 +70,7 @@ function HeaderWithBackButton({
             // Hover on some part of close icons will not work on Electron if dragArea is true
             // https://github.com/Expensify/App/issues/29598
             dataSet={{dragArea: false}}
-            style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton && styles.pl0,  shouldOverlay && StyleSheet.absoluteFillObject]}
+            style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton && styles.pl0, shouldOverlay && StyleSheet.absoluteFillObject]}
         >
             <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
                 {shouldShowBackButton && (