feat: Add vertical padding to context popover and call popover menu

src/components/VideoChatButtonAndMenu/BaseVideoChatButtonAndMenu.js

@@ -131,15 +131,17 @@ class BaseVideoChatButtonAndMenu extends Component {
                         top: this.state.videoChatIconPosition.y + 40,
                     }}
                 >
-                    {_.map(this.menuItemData, ({icon, text, onPress}) => (
-                        <MenuItem
-                            wrapperStyle={styles.mr3}
-                            key={text}
-                            icon={icon}
-                            title={text}
-                            onPress={onPress}
-                        />
-                    ))}
+                    <View style={this.props.isSmallScreenWidth ? {} : styles.pv3}>
+                        {_.map(this.menuItemData, ({icon, text, onPress}) => (
+                            <MenuItem
+                                wrapperStyle={styles.mr3}
+                                key={text}
+                                icon={icon}
+                                title={text}
+                                onPress={onPress}
+                            />
+                        ))}
+                    </View>
                 </Popover>
             </>
         );

src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js

@@ -45,7 +45,7 @@ const defaultProps = {
 class BaseReportActionContextMenu extends React.Component {
     constructor(props) {
         super(props);
-        this.wrapperStyle = getReportActionContextMenuStyles(this.props.isMini);
+        this.wrapperStyle = getReportActionContextMenuStyles(this.props.isMini, this.props.isSmallScreenWidth);
 
         this.state = {
             shouldKeepOpen: false,

src/styles/getReportActionContextMenuStyles.js

@@ -25,10 +25,20 @@ const bigWrapperStyle = [
  * Generate the wrapper styles for the ReportActionContextMenu.
  *
  * @param {Boolean} isMini
+ * @param {Boolean} isSmallScreenWidth
  * @returns {Array}
  */
-function getReportActionContextMenuStyles(isMini) {
-    return isMini ? miniWrapperStyle : bigWrapperStyle;
+function getReportActionContextMenuStyles(isMini, isSmallScreenWidth) {
+    if (isMini) {
+        return miniWrapperStyle;
+    }
+
+    return [
+        ...bigWrapperStyle,
+
+        // Small screens use a bottom-docked modal that already has vertical padding.
+        isSmallScreenWidth ? {} : styles.pv3,
+    ];
 }
 
 export default getReportActionContextMenuStyles;