From e63466b32a5ec618877468adc74a578ac26dae6f Mon Sep 17 00:00:00 2001
From: souyahia-monk <samy.ouyahia@monkvision.ai>
Date: Thu, 9 Feb 2023 11:06:31 +0100
Subject: [PATCH 1/2] Reduced the size of the PartSelector when screen sizes
 are very small

---
 .../components/AddDamageModal/PartSelector.js | 19 +++++++++++++++----
 .../src/components/AddDamageModal/index.js    |  8 ++++----
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/camera/src/components/AddDamageModal/PartSelector.js b/packages/camera/src/components/AddDamageModal/PartSelector.js
index a47ee1b8e..b03adc13b 100644
--- a/packages/camera/src/components/AddDamageModal/PartSelector.js
+++ b/packages/camera/src/components/AddDamageModal/PartSelector.js
@@ -1,25 +1,36 @@
 import React, { useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import PropTypes from 'prop-types';
 
 import { useWireframe, useXMLParser } from './hooks';
 import SVGComponentMapper from './SVGComponentMapper';
 
 const PART_SELECTOR_CONTAINER_WIDTH = 420;
-const PART_SELECTOR_CONTAINER_HEIGHT = 235;
+const PART_SELECTOR_CONTAINER_HEIGHT_DIMENSION = [
+  { screenHeightSpan: [0, 285], partSelectorHeight: 190 },
+  { screenHeightSpan: [285, 310], partSelectorHeight: 190 },
+  { screenHeightSpan: [310, 99999], partSelectorHeight: 235 },
+];
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     position: 'relative',
     width: PART_SELECTOR_CONTAINER_WIDTH,
-    height: PART_SELECTOR_CONTAINER_HEIGHT,
   },
 });
 
 export default function PartSelector({ orientation, togglePart, isPartSelected, vehicleType }) {
+  const { height } = useWindowDimensions();
   const wireframeXML = useWireframe({ orientation, vehicleType });
   const doc = useXMLParser(wireframeXML);
+
+  const containerHeight = useMemo(
+    () => PART_SELECTOR_CONTAINER_HEIGHT_DIMENSION
+      .find(({ screenHeightSpan }) => screenHeightSpan[0] <= height
+        && height < screenHeightSpan[1])?.partSelectorHeight ?? 235,
+    [height],
+  );
   const svgElement = useMemo(() => {
     const svg = doc.children[0];
     if (svg.tagName !== 'svg') {
@@ -29,7 +40,7 @@ export default function PartSelector({ orientation, togglePart, isPartSelected,
   }, [doc]);
 
   return (
-    <View style={[styles.container]}>
+    <View style={[styles.container, { height: containerHeight }]}>
       <SVGComponentMapper
         element={svgElement}
         togglePart={togglePart}
diff --git a/packages/camera/src/components/AddDamageModal/index.js b/packages/camera/src/components/AddDamageModal/index.js
index 37c8eaefa..19e657be3 100644
--- a/packages/camera/src/components/AddDamageModal/index.js
+++ b/packages/camera/src/components/AddDamageModal/index.js
@@ -101,8 +101,8 @@ export default function AddDamageModal({
   const isConfirmDisabled = useMemo(() => selectedParts.length === 0, [selectedParts]);
 
   return (
-    <View style={[styles.container, isCompact ? { paddingVertical: 3 } : null]}>
-      <View style={[styles.header, isCompact ? { marginBottom: 0 } : null]}>
+    <View style={[styles.container, isCompact ? { paddingVertical: 3 } : {}]}>
+      <View style={[styles.header, isCompact ? { marginBottom: 0 } : {}]}>
         <Text style={[styles.text, styles.title]}>
           {t('partSelector.modal.title')}
         </Text>
@@ -145,7 +145,7 @@ export default function AddDamageModal({
       </View>
       <View style={[styles.footer]}>
         <TouchableOpacity
-          style={[styles.button, isCompact ? styles.buttonCompact : null]}
+          style={[styles.button, isCompact ? styles.buttonCompact : {}]}
           onPress={onCancel}
         >
           <Text style={[styles.text]}>
@@ -153,7 +153,7 @@ export default function AddDamageModal({
           </Text>
         </TouchableOpacity>
         <TouchableOpacity
-          style={[styles.button, isCompact ? styles.buttonCompact : null]}
+          style={[styles.button, isCompact ? styles.buttonCompact : {}]}
           onPress={() => onConfirm(selectedParts)}
           disabled={isConfirmDisabled}
         >

From 7a0e6194850212a283ca0ec790621f3dbf2d2132 Mon Sep 17 00:00:00 2001
From: souyahia-monk <samy.ouyahia@monkvision.ai>
Date: Thu, 9 Feb 2023 11:08:42 +0100
Subject: [PATCH 2/2] Increased the marginTop of the VIN modal

---
 src/components/Modal/styles.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Modal/styles.js b/src/components/Modal/styles.js
index 8819ba1ef..4f33c39df 100644
--- a/src/components/Modal/styles.js
+++ b/src/components/Modal/styles.js
@@ -27,7 +27,7 @@ export default StyleSheet.create({
     width: '90%',
     height: 'auto',
     padding: 4,
-    marginTop: 30,
+    marginTop: 200,
   },
   item: {
     borderRadius: 4,