From bd8a8ee3623a3480bdfd97d9709deb22c09360b5 Mon Sep 17 00:00:00 2001
From: Bruno Lemos <brunohplemos@gmail.com>
Date: Thu, 31 Jan 2019 12:24:49 -0200
Subject: [PATCH] Fix AddColumnModal on small screens

Make it scrollable
---
 .../src/components/modals/AddColumnModal.tsx          | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/components/modals/AddColumnModal.tsx b/packages/components/src/components/modals/AddColumnModal.tsx
index 9a1d4e24..fcad4d4d 100644
--- a/packages/components/src/components/modals/AddColumnModal.tsx
+++ b/packages/components/src/components/modals/AddColumnModal.tsx
@@ -1,6 +1,6 @@
 import { rgba } from 'polished'
 import React, { useEffect, useRef } from 'react'
-import { StyleSheet, View } from 'react-native'
+import { ScrollView, View } from 'react-native'
 import { useSpring } from 'react-spring/native-hooks'
 
 import {
@@ -287,7 +287,12 @@ export function AddColumnModal(props: AddColumnModalProps) {
       showBackButton={showBackButton}
       title="Add Column"
     >
-      <View style={{ flex: 1 }}>
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{
+          flexGrow: 1,
+        }}
+      >
         {columnTypes.map((group, groupIndex) => (
           <View key={`add-column-header-group-${groupIndex}`}>
             <SubHeader title={group.title} />
@@ -356,7 +361,7 @@ export function AddColumnModal(props: AddColumnModalProps) {
         <Spacer
           height={isFabVisible ? fabSize + 2 * fabSpacing : contentPadding}
         />
-      </View>
+      </ScrollView>
     </ModalColumn>
   )
 }