From bc38b46c019f319b88c68d34e2f0f43cc2a8d049 Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Mon, 18 Dec 2023 12:22:29 +0100
Subject: [PATCH 1/2] Fix LHP animation on smaller screens

---
 .../Navigation/AppNavigator/getRootNavigatorScreenOptions.ts   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
index 3be7de786223..c80ae9914347 100644
--- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
+++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
@@ -47,7 +47,8 @@ export default (isSmallScreenWidth: boolean, themeStyles: ThemeStyles): ScreenOp
             // This is necessary to cover translated sidebar with overlay.
             width: isSmallScreenWidth ? '100%' : '200%',
 
-            transform: [{translateX: isSmallScreenWidth ? 0 : -variables.sideBarWidth}],
+            // LHP should be displayed in place of the sidebar
+            left: isSmallScreenWidth ? 0 : -variables.sideBarWidth,
         },
     },
     homeScreen: {

From 53e4fd63960be9233e4e34e29239be11bcc7a17d Mon Sep 17 00:00:00 2001
From: Wojciech Boman <wojciechboman@gmail.com>
Date: Mon, 18 Dec 2023 14:12:40 +0100
Subject: [PATCH 2/2] Adjust overlay style to LHP borderRadius

---
 src/styles/index.ts     | 7 ++++---
 src/styles/variables.ts | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/styles/index.ts b/src/styles/index.ts
index dabe6fc12323..6024c8393afb 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1385,8 +1385,8 @@ const styles = (theme: ThemeColors) =>
                 position: 'absolute',
                 left: 0,
                 height: '100%',
-                borderTopRightRadius: isSmallScreenWidth ? 0 : 24,
-                borderBottomRightRadius: isSmallScreenWidth ? 0 : 24,
+                borderTopRightRadius: isSmallScreenWidth ? 0 : variables.lhpBorderRadius,
+                borderBottomRightRadius: isSmallScreenWidth ? 0 : variables.lhpBorderRadius,
                 overflow: 'hidden',
             } satisfies ViewStyle),
         RHPNavigatorContainer: (isSmallScreenWidth: boolean) =>
@@ -1614,7 +1614,8 @@ const styles = (theme: ThemeColors) =>
             ({
                 ...positioning.pFixed,
                 // We need to stretch the overlay to cover the sidebar and the translate animation distance.
-                left: isModalOnTheLeft ? 0 : -2 * variables.sideBarWidth,
+                // The overlay must also cover borderRadius of the LHP component
+                left: isModalOnTheLeft ? -variables.lhpBorderRadius : -2 * variables.sideBarWidth,
                 top: 0,
                 bottom: 0,
                 right: isModalOnTheLeft ? -2 * variables.sideBarWidth : 0,
diff --git a/src/styles/variables.ts b/src/styles/variables.ts
index 65d7f6a0311d..3195e2e1f7f4 100644
--- a/src/styles/variables.ts
+++ b/src/styles/variables.ts
@@ -192,4 +192,6 @@ export default {
     cardPreviewHeight: 148,
     cardPreviewWidth: 235,
     cardNameWidth: 156,
+
+    lhpBorderRadius: 24,
 } as const;