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: { diff --git a/src/styles/index.ts b/src/styles/index.ts index 696d23261412..5e47dea954e9 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1410,8 +1410,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), @@ -1640,7 +1640,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 1127ff0ad588..cf11ed28f0d8 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -193,4 +193,6 @@ export default { cardPreviewHeight: 148, cardPreviewWidth: 235, cardNameWidth: 156, + + lhpBorderRadius: 24, } as const;