Style fixes

components/cycle-day/select-box-group.js

@@ -9,7 +9,7 @@ import { AppText } from '../app-text'
 export default class SelectBoxGroup extends Component {
   render() {
     return (
-      <View flexDirection='row' flexWrap='wrap'>
+      <View style={styles.selectBoxSection}>
         {this.props.data.map(({ label, stateKey }) => {
           const style = [styles.selectBox]
           const textStyle = []

components/cycle-day/symptoms/pain.js

@@ -9,6 +9,7 @@ import { pain as labels } from '../labels/labels'
 import ActionButtonFooter from './action-button-footer'
 import SelectBoxGroup from '../select-box-group'
 import SymptomSection from './symptom-section'
+import styles from '../../../styles'
 
 const categories = labels.categories
 const boxes = [{
@@ -61,7 +62,7 @@ export default class Pain extends Component {
   render() {
     return (
       <View style={{ flex: 1 }}>
-        <ScrollView>
+        <ScrollView style={styles.page}>
           <SymptomSection
             explainer={labels.explainer}
           >

styles/index.js

@@ -182,7 +182,8 @@ export default StyleSheet.create({
   },
   selectBox: {
     backgroundColor: 'lightgrey',
-    margin: 7,
+    marginRight: 7,
+    marginVertical: 5,
     paddingHorizontal: 15,
     paddingVertical: 10,
     borderRadius: 10