Merge pull request Expensify#66889 from callstack-internal/VickyStash/bugfix/65251-fix-receipt-preview-padding

Fix horizontal padding when opening a receipt while creating expenses with Multi-Scan

Author: cristipaval

src/components/Attachments/AttachmentView/index.tsx

@@ -316,7 +316,11 @@ function AttachmentView({
                         }}
                     />
                 </View>
-                <View style={safeAreaPaddingBottomStyle}>{isHighResolution && <HighResolutionInfo isUploaded={isUploaded} />}</View>
+                {isHighResolution && (
+                    <View style={safeAreaPaddingBottomStyle}>
+                        <HighResolutionInfo isUploaded={isUploaded} />
+                    </View>
+                )}
             </>
         );
     }

src/components/MultiGestureCanvas/utils.ts

@@ -9,10 +9,16 @@ function clamp(value: number, lowerBound: number, upperBound: number) {
     return Math.min(Math.max(lowerBound, value), upperBound);
 }
 
+// Small buffer to prevent hairline spacing issues caused by floating-point precision errors
+// When scaling images, rounding can create sub-pixel gaps that appear as thin lines
+const SCALE_BUFFER = 1.001;
+
 const getCanvasFitScale: GetCanvasFitScale = ({canvasSize, contentSize}) => {
     const scaleX = clamp(canvasSize.width / contentSize.width, 0, 1);
     const scaleY = clamp(canvasSize.height / contentSize.height, 0, 1);
-    const minScale = Math.min(scaleX, scaleY);
+    // Apply small buffer to ensure scaled image always fills container completely,
+    // eliminating hairline spaces that can appear due to rounding precision
+    const minScale = Math.min(scaleX, scaleY) * SCALE_BUFFER;
     const maxScale = Math.max(scaleX, scaleY);
 
     return {scaleX, scaleY, minScale, maxScale};

src/pages/iou/request/step/IOURequestStepScan/ReceiptViewModal/index.tsx

@@ -104,6 +104,7 @@ function ReceiptViewModal({route}: ReceiptViewModalProps) {
             isVisible
             onClose={handleGoBack}
             onModalHide={clearAttachmentErrors}
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
             <HeaderWithBackButton
                 title={translate('common.receipt')}

src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.native.tsx

@@ -38,6 +38,7 @@ function AttachmentModalContainer({contentProps, navigation, onShow, onClose}: A
         <ScreenWrapper
             navigation={navigation}
             testID={`attachment-modal-${testID}`}
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
             <AttachmentModalBaseContent
                 // eslint-disable-next-line react/jsx-props-no-spreading

src/pages/media/AttachmentModalScreen/AttachmentModalContainer/index.tsx

@@ -62,6 +62,7 @@ function AttachmentModalContainer({contentProps, modalType, onShow, onClose, sho
             }}
             shouldHandleNavigationBack={shouldHandleNavigationBack}
             onClose={closeModal}
+            enableEdgeToEdgeBottomSafeAreaPadding
         >
             <AttachmentModalBaseContent
                 // eslint-disable-next-line react/jsx-props-no-spreading