4 files changed, 28 insertions, 12 deletions
diff --git a/client/src/lib/components/close.js b/client/src/lib/components/close.js
index c5fa0f0..7c0fd3c 100644
--- a/client/src/lib/components/close.js
+++ b/client/src/lib/components/close.js
@@ -3,6 +3,7 @@ import {
   StyleSheet,
   Image,
   View,
+  TouchableWithoutFeedback,
 } from 'react-native';
 import DeviceInfo from 'react-native-device-info'
 
@@ -12,18 +13,18 @@ import { isFirefox } from './browser'
 export default class Close extends Component {
   render() {
     return (
-      <Touchable onPress={this.props.onPress}>
+      <TouchableWithoutFeedback onPress={this.props.onPress}>
         <View style={styles.close}>
           <Image key={'image_close'} source={require('../../img/close.png')} style={styles.closeImage} />
         </View>
-      </Touchable>
+      </TouchableWithoutFeedback>
     )
   }
 }
 
 const styles = StyleSheet.create({
   close: {
-    position: isFirefox ? 'fixed' : 'absolute',
+    position: 'fixed',
     top: 10,
     right: 10,
     width: 40,
diff --git a/client/src/lib/components/footer.js b/client/src/lib/components/footer.js
index 15f6f0b..3778920 100644
--- a/client/src/lib/components/footer.js
+++ b/client/src/lib/components/footer.js
@@ -20,7 +20,9 @@ export default class ClearText extends Component {
         </Link>
         <View style={styles.footerItem}>
           <Touchable onPress={() => this.props.onLinkPress('http://armoryonpark.org/')}>
-            <Image source={require('../../img/armory.png')} resizeMode='contain' style={styles.footerLogo} />
+            <View>
+              <Image source={require('../../img/armory.png')} resizeMode='contain' style={styles.footerLogo} />
+            </View>
           </Touchable>
         </View>
         <Link to='/page/credits'>
@@ -54,9 +56,6 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   footerLogo: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    alignItems: 'center',
     maxWidth: isMobile ? 100 : 140,
     maxHeight: isMobile ? 30 : 40,
     width: 260,
diff --git a/client/src/lib/components/touchable.js b/client/src/lib/components/touchable.js
index fd72c60..bfdfec3 100644
--- a/client/src/lib/components/touchable.js
+++ b/client/src/lib/components/touchable.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import {
   TouchableOpacity,
   TouchableWithoutFeedback,
+  View,
 } from 'react-native';
 
 const isIphone = (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))
@@ -14,8 +15,16 @@ const isFirefox = navigator.userAgent.match('Firefox')
 export default class Touchable extends Component {
   render() {
     if (isFirefox) {
+      let { children, ...props } = this.props
+      if (children.length > 1) {
+        children = (
+          <View>
+            {children}
+          </View>
+        )
+      }
       return (
-        <TouchableWithoutFeedback {...this.props} />
+        <TouchableWithoutFeedback children={children} {...props} />
       )
     }
     else {
diff --git a/client/src/lib/views/information.js b/client/src/lib/views/information.js
index 9e69a83..1f3fc72 100644
--- a/client/src/lib/views/information.js
+++ b/client/src/lib/views/information.js
@@ -105,10 +105,12 @@ export default class Information extends Component {
 
         <Modal style={styles.modal} isVisible={this.state.essayModalVisible}>
           <ScrollView contentContainerStyle={styles.modalContainer}>
-            <View style={styles.modalBody}>
-              <Heading style={styles.essayHeader}>{this.state.essay.title.toUpperCase()}</Heading>
-              <Heading style={styles.essayBylineHeader}>{this.state.essay.byline}</Heading>
-              <HTMLView value={this.state.essayBody} stylesheet={htmlStyles} onLinkPress={this.props.onLinkPress} />
+            <View style={styles.modalInner}>
+              <View style={styles.modalBody}>
+                <Heading style={styles.essayHeader}>{this.state.essay.title.toUpperCase()}</Heading>
+                <Heading style={styles.essayBylineHeader}>{this.state.essay.byline}</Heading>
+                <HTMLView value={this.state.essayBody} stylesheet={htmlStyles} onLinkPress={this.props.onLinkPress} />
+              </View>
             </View>
           </ScrollView>
           <Close onPress={() => this.hideEssay()} />
@@ -195,9 +197,14 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-start',
     alignItems: 'center',
   },
+  modalInner: {
+    width: '100vw',
+    alignItems: 'center',
+  },
   modalBody: {
     marginTop: 20,
     width: isMobile ? '95%' : '90%',
+    maxWidth: 650,
     backgroundColor: 'black',
     padding: isMobile ? 10 : 40,
     marginBottom: 200,