5 files changed, 27 insertions, 23 deletions
diff --git a/app/components/CustomScrollbars.css b/app/components/CustomScrollbars.css
index 1251c170f5..4604b1e413 100644
--- a/app/components/CustomScrollbars.css
+++ b/app/components/CustomScrollbars.css
@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  height: 100%;
 }
 
 .custom-scrollbars__scrollable {
diff --git a/app/components/CustomScrollbars.js b/app/components/CustomScrollbars.js
index d2f89d5e15..69381f60cd 100644
--- a/app/components/CustomScrollbars.js
+++ b/app/components/CustomScrollbars.js
@@ -53,10 +53,11 @@ export default class CustomScrollbars extends Component {
   }
 
   render() {
+    const { autoHide: _autoHide, thumbInset: _thumbInset, children, ...otherProps } = this.props;
     const showScrollbars = this.state.canScroll && this.state.showScrollIndicators;
     const thumbAnimationClass = showScrollbars ? ' custom-scrollbars__thumb--visible' : '';
     return (
-      <div className="custom-scrollbars">
+      <div {...otherProps } className="custom-scrollbars">
         <div className={ `custom-scrollbars__thumb ${thumbAnimationClass}` }
           style={{ position: 'absolute', top: 0, right: 0 }}
           ref={ this._onThumbRef }></div>
@@ -64,7 +65,7 @@ export default class CustomScrollbars extends Component {
           style={{ overflow: 'auto' }}
           onScroll={ this._onScroll }
           ref={ this._onScrollableRef }>
-          { this.props.children }
+          { children }
         </div>
       </div>
     );
diff --git a/app/components/PreferencesStyles.js b/app/components/PreferencesStyles.js
index 64d900b09a..002494a6c5 100644
--- a/app/components/PreferencesStyles.js
+++ b/app/components/PreferencesStyles.js
@@ -21,7 +21,6 @@ export default {
       paddingRight: 24,
       paddingLeft: 24,
       paddingBottom: 24,
-      position: 'relative' /* anchor for close button */
     },
     preferences__close: {
       position: 'absolute',
diff --git a/app/components/Settings.js b/app/components/Settings.js
index b5c0465210..0fc1c6fa10 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -42,7 +42,7 @@ export default class Settings extends Component {
                 <Text style={styles.settings__title}>Settings</Text>
               </View>
 
-              <CustomScrollbars autoHide={ true }>
+              <CustomScrollbars style={styles.settings__scrollview} autoHide={ true }>
 
                 <View style={styles.settings__content}>
                   <View>
diff --git a/app/components/SettingsStyles.js b/app/components/SettingsStyles.js
index 1013c1b6c8..0b39235d7b 100644
--- a/app/components/SettingsStyles.js
+++ b/app/components/SettingsStyles.js
@@ -10,25 +10,34 @@ export default Object.assign(createViewStyles({
     height: '100%'
   },
   settings__header:{
-    flex: 0,
-    paddingTop: 12,
-    paddingBottom: 12,
-    paddingLeft: 24,
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
+    paddingTop: 40,
     paddingRight: 24,
-    position: 'relative' /* anchor for close button */
+    paddingLeft: 24,
+    paddingBottom: 24,
   },
-  settings__content:{
+  settings__content: {
     flexDirection: 'column',
     flex: 1,
     justifyContent: 'space-between',
     height: '100%',
   },
-  settings__close:{
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    marginTop: 0,
-    marginLeft: 12,
+  settings__scrollview: {
+    flexGrow: 1,
+    flexShrink: 1,
+    flexBasis: '100%',
+  },
+  settings__close: {
+    position: 'absolute',
+    top: 0,
+    left: 12,
+    borderWidth: 0,
+    padding: 0,
+    margin: 0,
+    zIndex: 1, /* part of .settings__close covers the button */
+    cursor: 'default',
   },
   settings__close_icon:{
     width: 24,
@@ -81,16 +90,12 @@ export default Object.assign(createViewStyles({
     borderRadius: 4,
     justifyContent: 'center',
     alignItems: 'center',
-    width: '100%',
   },
-  settings__footer:{
-    width: '100%',
-    justifyContent: 'center',
-    alignItems: 'center',
+  settings__footer: {
     paddingTop: 24,
     paddingLeft: 24,
     paddingRight: 24,
-    paddingBottom: 24 * 2, // Not entirely sure why I need to double the padding here :/
+    paddingBottom: 24,
   },
 }), createTextStyles({
   settings__title:{