Fix: temperature screen

components/cycle-day/symptom-edit-view.js

@@ -112,13 +112,14 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
 
   return (
     <AppModal onClose={onSave}>
-      <ScrollView
+      <View style={styles.modalWindow}>
-        contentContainerStyle={styles.modalContainer}
-        style={styles.modalWindow}
-      >
         <View style={styles.headerContainer}>
           <CloseIcon onClose={onSave} />
         </View>
+        <ScrollView
+          contentContainerStyle={styles.modalContainer}
+          keyboardDismissMode="on-drag"
+        >
           {symptom === 'temperature' && (
             <Temperature
               date={date}
@@ -204,6 +205,7 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
             </Segment>
           )}
         </ScrollView>
+      </View>
     </AppModal>
   )
 }
@@ -218,21 +220,28 @@ SymptomEditView.propTypes = {
 const styles = StyleSheet.create({
   buttonsContainer: {
     ...Containers.rowContainer,
+    paddingHorizontal: Spacing.base,
+    paddingBottom: Spacing.base,
   },
   headerContainer: {
     flexDirection: 'row',
     justifyContent: 'flex-end',
-    paddingVertical: Spacing.tiny,
+    paddingTop: Spacing.base,
+    paddingHorizontal: Spacing.base,
+    position: 'absolute',
+    width: '100%',
+    zIndex: 3, // works on ios
+    elevation: 3, // works on android
   },
   modalContainer: {
-    flex: 1,
+    paddingHorizontal: Spacing.base,
-    padding: Spacing.base,
   },
   modalWindow: {
     alignSelf: 'center',
     backgroundColor: 'white',
     borderRadius: 10,
-    marginVertical: Sizes.huge * 2,
+    marginTop: Sizes.huge * 2,
+    paddingTop: Spacing.large * 2,
     position: 'absolute',
     minHeight: '40%',
     maxHeight: Dimensions.get('window').height * 0.7,