diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx
index ec80be94a6c8..ce84ff3067a8 100644
--- a/src/components/Modal/BaseModal.tsx
+++ b/src/components/Modal/BaseModal.tsx
@@ -33,7 +33,7 @@ import type ReanimatedModalProps from './ReanimatedModal/types';
 import type BaseModalProps from './types';
 import type {FocusTrapOptions} from './types';
 
-const REANIMATED_MODAL_TYPES: Array<ValueOf<typeof CONST.MODAL.MODAL_TYPE>> = [CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.FULLSCREEN];
+const REANIMATED_MODAL_TYPES: Array<ValueOf<typeof CONST.MODAL.MODAL_TYPE>> = [CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.FULLSCREEN, CONST.MODAL.MODAL_TYPE.POPOVER];
 
 type ModalComponentProps = (ReactNativeModalProps | ReanimatedModalProps) & {
     type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
@@ -165,8 +165,10 @@ function BaseModal(
 
     const {sidePanelOffset} = useSidePanel();
     const sidePanelStyle = !shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {paddingRight: sidePanelOffset.current} : undefined;
-    const sidePanelReanimatedStyle =
-        shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {transform: [{translateX: Animated.multiply(sidePanelOffset.current, -1)}]} : undefined;
+    const sidePanelAnimatedStyle =
+        (shouldUseReanimatedModal || type === CONST.MODAL.MODAL_TYPE.POPOVER) && shouldApplySidePanelOffset && !isSmallScreenWidth
+            ? {transform: [{translateX: Animated.multiply(sidePanelOffset.current, -1)}]}
+            : undefined;
     const keyboardStateContextValue = useKeyboardState();
 
     const [modalOverlapsWithTopSafeArea, setModalOverlapsWithTopSafeArea] = useState(false);
@@ -459,7 +461,7 @@ function BaseModal(
                     >
                         <Animated.View
                             onLayout={onViewLayout}
-                            style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone, sidePanelReanimatedStyle]}
+                            style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone, sidePanelAnimatedStyle]}
                             ref={ref}
                         >
                             <ColorSchemeWrapper>{children}</ColorSchemeWrapper>
diff --git a/src/components/Modal/ReanimatedModal/Container/index.tsx b/src/components/Modal/ReanimatedModal/Container/index.tsx
index 8381fc7c361f..3d944c8f534a 100644
--- a/src/components/Modal/ReanimatedModal/Container/index.tsx
+++ b/src/components/Modal/ReanimatedModal/Container/index.tsx
@@ -46,7 +46,7 @@ function Container({
 
     return (
         <View
-            style={[style, styles.modalContainer]}
+            style={style}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
         >
diff --git a/src/components/Modal/ReanimatedModal/Container/index.web.tsx b/src/components/Modal/ReanimatedModal/Container/index.web.tsx
index 0d57c2af8755..567fd29644e2 100644
--- a/src/components/Modal/ReanimatedModal/Container/index.web.tsx
+++ b/src/components/Modal/ReanimatedModal/Container/index.web.tsx
@@ -46,7 +46,7 @@ function Container({
 
     return (
         <Animated.View
-            style={[style, styles.modalContainer, type !== CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED && styles.modalAnimatedContainer, animatedStyles, {zIndex: 1}]}
+            style={[style, type !== CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED && type !== CONST.MODAL.MODAL_TYPE.POPOVER && styles.modalAnimatedContainer, animatedStyles, {zIndex: 1}]}
             exiting={Exiting}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index bef845e43690..375e9de8dbec 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -2687,8 +2687,6 @@ const styles = (theme: ThemeColors) =>
             borderColor: theme.transparent,
         },
 
-        modalContainer: {height: '100%'},
-
         modalAnimatedContainer: {width: '100%'},
 
         modalContainerBox: {
diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts
index 5ccfeb6a813d..086f09632f36 100644
--- a/src/styles/utils/generators/ModalStyleUtils.ts
+++ b/src/styles/utils/generators/ModalStyleUtils.ts
@@ -93,10 +93,9 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 // and can be dismissed by clicking outside of the modal.
                 modalStyle = {
                     ...modalStyle,
-                    ...{
-                        justifyContent: 'center',
-                        alignItems: 'center',
-                    },
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    height: '100%',
                 };
                 modalContainerStyle = {
                     boxShadow: theme.shadow,
@@ -118,9 +117,8 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 // viewed on a smaller device (e.g. mobile or mobile web).
                 modalStyle = {
                     ...modalStyle,
-                    ...{
-                        alignItems: 'center',
-                    },
+                    alignItems: 'center',
+                    height: '100%',
                 };
                 modalContainerStyle = {
                     boxShadow: theme.shadow,
@@ -148,9 +146,8 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 // viewed on a smaller device (e.g. mobile or mobile web).
                 modalStyle = {
                     ...modalStyle,
-                    ...{
-                        alignItems: 'center',
-                    },
+                    alignItems: 'center',
+                    height: '100%',
                 };
                 modalContainerStyle = {
                     boxShadow: theme.shadow,
@@ -175,10 +172,9 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 // A centered modal that cannot be dismissed with a swipe.
                 modalStyle = {
                     ...modalStyle,
-                    ...{
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                    },
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100%',
                 };
                 modalContainerStyle = {
                     boxShadow: theme.shadow,
@@ -201,9 +197,8 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 // A centered modal that takes up the minimum possible screen space on all devices
                 modalStyle = {
                     ...modalStyle,
-                    ...{
-                        alignItems: 'center',
-                    },
+                    alignItems: 'center',
+                    height: '100%',
                 };
                 modalContainerStyle = {
                     boxShadow: theme.shadow,
@@ -225,10 +220,9 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
             case CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED:
                 modalStyle = {
                     ...modalStyle,
-                    ...{
-                        alignItems: 'center',
-                        justifyContent: 'flex-end',
-                    },
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
+                    height: '100%',
                 };
                 modalContainerStyle = {
                     width: '100%',
@@ -258,11 +252,9 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 modalStyle = {
                     ...modalStyle,
                     ...popoverAnchorPosition,
-                    ...{
-                        position: 'absolute',
-                        alignItems: 'center',
-                        justifyContent: 'flex-end',
-                    },
+                    position: 'absolute',
+                    alignItems: 'center',
+                    justifyContent: 'flex-end',
                 };
                 modalContainerStyle = {
                     borderRadius: variables.componentBorderRadiusLarge,
@@ -281,12 +273,11 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
             case CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED:
                 modalStyle = {
                     ...modalStyle,
-                    ...{
-                        marginLeft: isSmallScreenWidth ? 0 : windowWidth - variables.sideBarWidth,
-                        width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
-                        flexDirection: 'row',
-                        justifyContent: 'flex-end',
-                    },
+                    marginLeft: isSmallScreenWidth ? 0 : windowWidth - variables.sideBarWidth,
+                    width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
+                    flexDirection: 'row',
+                    justifyContent: 'flex-end',
+                    height: '100%',
                 };
                 modalContainerStyle = {
                     width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
@@ -321,7 +312,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
                 shouldAddTopSafeAreaPadding = true;
                 break;
             default:
-                modalStyle = {};
+                modalStyle = {height: '100%'};
                 modalContainerStyle = {};
                 swipeDirection = 'down';
                 animationIn = 'slideInUp';