Fix symptom-box text overflow

components/cycle-day/symptom-box.js

@@ -94,7 +94,7 @@ class SymptomBox extends Component {
               {symptomTitles[symptom].toLowerCase()}
             </AppText>
             {symptomDataToDisplay &&
-              <AppText style={textStyle} numberOfLines={4}>
+              <AppText style={textStyle} numberOfLines={3} >
                 {symptomDataToDisplay}
               </AppText>
             }
@@ -132,13 +132,13 @@ const styles = StyleSheet.create({
   textContainer: {
     flexDirection: 'column',
     justifyContent: 'center',
-    marginLeft: Spacing.small,
+    marginLeft: Spacing.tiny,
     maxWidth: Spacing.textWidth
   },
   text: {
     fontSize: Sizes.small,
     fontStyle: 'italic',
-    lineHeight: 14
+    lineHeight: scale(14)
   },
   textDisabled: {
     color: Colors.greyLight

styles/spacing.js

@@ -1,12 +1,12 @@
-import { moderateScale } from 'react-native-size-matters'
+import { scale } from 'react-native-size-matters'
 
 import { fontRatio } from '../config'
 
 export default {
-  tiny: moderateScale(4 / fontRatio),
+  tiny: scale(4 / fontRatio),
-  small: moderateScale(10 / fontRatio),
+  small: scale(10 / fontRatio),
-  base: moderateScale(16 / fontRatio),
+  base: scale(16 / fontRatio),
-  large: moderateScale(20 / fontRatio),
+  large: scale(20 / fontRatio),
   symptomTileWidth: '48%',
   textWidth: '70%'
 }

styles/typography.js

@@ -1,4 +1,6 @@
 import { Platform } from 'react-native'
+import { scale } from 'react-native-size-matters'
+
 
 import { fontRatio } from '../config'
 
@@ -11,14 +13,14 @@ export const fonts = {
 }
 
 export const sizes = {
-  tiny: 7 / fontRatio,
+  tiny: scale(7 / fontRatio),
-  footnote: 10 / fontRatio,
+  footnote: scale(10 / fontRatio),
-  small: 13 / fontRatio,
+  small: scale(13 / fontRatio),
-  base: 18 / fontRatio,
+  base: scale(18 / fontRatio),
-  subtitle: 22 / fontRatio,
+  subtitle: scale(22 / fontRatio),
-  title: 24 / fontRatio,
+  title: scale(24 / fontRatio),
-  huge: 32 / fontRatio,
+  huge: scale(32 / fontRatio),
-  icon: 40 / fontRatio,
+  icon: scale(40 / fontRatio),
 }
 
 const accentText = {
@@ -29,12 +31,12 @@ const accentText = {
 
 const accentTextBig = {
   ...accentText,
-  fontSize: 30 / fontRatio,
+  fontSize: scale(30 / fontRatio),
 }
 
 const accentTextGiant = {
   ...accentText,
-  fontSize: sizes.icon / fontRatio,
+  fontSize: sizes.icon,
 }
 
 const accentTextHuge = {