Merge pull request #18851 from hellohublot/Fix_Modal_Border_PDF_Width

Remove borderWidth of fullScreen smallScreen modal and modify PDF width
Expensify · May 16, 2023 · 46d27b8 · 46d27b8
2 parents 080f228 + c32e848
commit 46d27b8
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 12 deletions.
diff --git a/src/components/AttachmentCarousel/index.js b/src/components/AttachmentCarousel/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import {View, FlatList} from 'react-native';
+import {View, FlatList, PixelRatio} from 'react-native';
 import PropTypes from 'prop-types';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
@@ -244,8 +244,8 @@ class AttachmentCarousel extends React.Component {
     renderCell(props) {
         // Use window width instead of layout width to address the issue in https://github.com/Expensify/App/issues/17760
         // considering horizontal margin and border width in centered modal
-        const modalStyles = styles.centeredModalStyles(this.props.isSmallScreenWidth);
-        const style = [props.style, styles.h100, {width: this.props.windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2 + 1}];
+        const modalStyles = styles.centeredModalStyles(this.props.isSmallScreenWidth, true);
+        const style = [props.style, styles.h100, {width: PixelRatio.roundToNearestPixel(this.props.windowWidth - (modalStyles.marginHorizontal + modalStyles.borderWidth) * 2)}];
 
         return (
             <View
@@ -289,7 +289,7 @@ class AttachmentCarousel extends React.Component {
         return (
             <View
                 style={[styles.attachmentModalArrowsContainer, styles.flex1]}
-                onLayout={({nativeEvent}) => this.setState({containerWidth: nativeEvent.layout.width + 1})}
+                onLayout={({nativeEvent}) => this.setState({containerWidth: PixelRatio.roundToNearestPixel(nativeEvent.layout.width)})}
                 onMouseEnter={() => !this.canUseTouchScreen && this.toggleArrowsVisibility(true)}
                 onMouseLeave={() => !this.canUseTouchScreen && this.toggleArrowsVisibility(false)}
             >

diff --git a/src/components/PDFView/index.js b/src/components/PDFView/index.js
@@ -108,8 +108,7 @@ class PDFView extends Component {
     render() {
         const pdfContainerWidth = this.state.windowWidth - 100;
         const pageWidthOnLargeScreen = pdfContainerWidth <= variables.pdfPageMaxWidth ? pdfContainerWidth : variables.pdfPageMaxWidth;
-        const pageWidth = this.props.isSmallScreenWidth ? this.state.windowWidth - 30 : pageWidthOnLargeScreen;
-
+        const pageWidth = this.props.isSmallScreenWidth ? this.state.windowWidth : pageWidthOnLargeScreen;
         const outerContainerStyle = [styles.w100, styles.h100, styles.justifyContentCenter, styles.alignItemsCenter];
 
         // If we're requesting a password then we need to hide - but still render -

diff --git a/src/styles/getModalStyles/getBaseModalStyles.js b/src/styles/getModalStyles/getBaseModalStyles.js
@@ -3,9 +3,9 @@ import variables from '../variables';
 import themeColors from '../themes/default';
 import styles from '../styles';
 
-const getCenteredModalStyles = (windowWidth, isSmallScreenWidth) => ({
-    borderWidth: styles.centeredModalStyles(isSmallScreenWidth).borderWidth,
-    width: isSmallScreenWidth ? '100%' : windowWidth - styles.centeredModalStyles(isSmallScreenWidth).marginHorizontal * 2,
+const getCenteredModalStyles = (windowWidth, isSmallScreenWidth, isFullScreenWhenSmall = false) => ({
+    borderWidth: styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall).borderWidth,
+    width: isSmallScreenWidth ? '100%' : windowWidth - styles.centeredModalStyles(isSmallScreenWidth, isFullScreenWhenSmall).marginHorizontal * 2,
 });
 
 export default (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}) => {
@@ -118,7 +118,7 @@ export default (type, windowDimensions, popoverAnchorPosition = {}, innerContain
                 marginBottom: isSmallScreenWidth ? 0 : 20,
                 borderRadius: isSmallScreenWidth ? 0 : 12,
                 overflow: 'hidden',
-                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth),
+                ...getCenteredModalStyles(windowWidth, isSmallScreenWidth, true),
             };
             swipeDirection = undefined;
             animationIn = isSmallScreenWidth ? 'slideInRight' : 'fadeIn';

diff --git a/src/styles/styles.js b/src/styles/styles.js
@@ -1979,8 +1979,8 @@ const styles = {
         backgroundColor: themeColors.modalBackdrop,
     },
 
-    centeredModalStyles: (isSmallScreenWidth) => ({
-        borderWidth: isSmallScreenWidth ? 1 : 0,
+    centeredModalStyles: (isSmallScreenWidth, isFullScreenWhenSmall) => ({
+        borderWidth: isSmallScreenWidth && !isFullScreenWhenSmall ? 1 : 0,
         marginHorizontal: isSmallScreenWidth ? 0 : 20,
     }),