scrolling description in profile screen

app/mobile/src/session/profile/Profile.jsx

@@ -17,6 +17,7 @@ export function Profile() {
 
   const [busyDetail, setBusyDetail] = useState(false);
   const { state, actions } = useProfile();
+  const OVERLAP = 56;
 
   const onGallery = async () => {
     try {
@@ -70,11 +71,12 @@ export function Profile() {
   }
 
   return (
-    <ScrollView style={styles.content} contentContainerStyle={{ display: 'flex', alignItems: 'center' }}>
+    <View style={styles.container}>
+      <Image source={state.imageSource} style={{ ...styles.logo, width: state.imageWidth, height: state.imageHeight }} resizeMode={'contain'} />
 
-      <Image source={state.imageSource} style={{ width: state.imageWidth, height: state.imageHeight, alignSelf: 'center' }} resizeMode={'contain'} />
+    <View style={styles.content}>
+      <View style={{ width: state.imageWidth, height: state.imageHeight - OVERLAP }} />
 
-      <View style={{ ...styles.details, width: state.detailWidth }}>
         <View style={styles.control}>
           <Menu>
             <MenuTrigger customStyles={styles.trigger}>
@@ -94,6 +96,9 @@ export function Profile() {
           </Menu>
         </View>
 
+
+      <View style={{ ...styles.details, width: state.detailWidth }}>
+
         { state.name && (
           <Text style={styles.nameSet} numberOfLines={1} adjustsFontSizeToFit={true}>{ state.name }</Text>
         )}
@@ -114,15 +119,17 @@ export function Profile() {
             )}
           </View>
           <View style={styles.divider} />
-          <View style={styles.entry}>
-            <MatIcons name="book-open-outline" style={styles.icon} size={20} color={Colors.text} />
-            { state.location && (
+          <ScrollView style={styles.description}>
+            <View style={styles.entry}>
+            <MatIcons name="book-open-outline" style={styles.descriptionIcon} size={20} color={Colors.text} />
+            { state.description && (
               <Text style={styles.descriptionSet}>{ state.description }</Text>
             )}
             { !state.description && (
               <Text style={styles.descriptionUnset}>Description</Text>
             )}
-          </View>
+            </View>
+          </ScrollView>
         </View>
 
         <View style={styles.group}>
@@ -202,7 +209,8 @@ export function Profile() {
         </KeyboardAvoidingView>
       </Modal>
 
-    </ScrollView>
+    </View>
+    </View>
   );
 }
 

app/mobile/src/session/profile/Profile.styled.js

@@ -2,14 +2,22 @@ import { StyleSheet } from 'react-native';
 import { Colors } from 'constants/Colors';
 
 export const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%',
+  },
   content: {
     width: '100%',
     height: '100%',
-    backgroundColor: Colors.screenBase,
+    position: 'absolute',
+    top: 0,
+    display: 'flex',
+    alignItems: 'center',
+  },
+  logo: {
+    alignSelf: 'center',
   },
   details: {
-    position: 'relative',
-    top: -32,
     minHeight: 32,
     borderTopRightRadius: 32,
     borderTopLeftRadius: 32,
@@ -20,11 +28,13 @@ export const styles = StyleSheet.create({
     borderRightWidth: 0.2,
     paddingLeft: 1,
     paddingRight: 1,
+    display: 'flex',
+    flexShrink: 1,
+    flexGrow: 1,
+    paddingBottom: 16,
   },
   control: {
-    position: 'absolute',
     width: '100%',
-    top: -24,
     display: 'flex',
     alignItems: 'center',
   },
@@ -81,6 +91,8 @@ export const styles = StyleSheet.create({
     backgroundColor: Colors.areaBase,
     borderRadius: 8,
     marginTop: 16,
+    display: 'flex',
+    flexShrink: 1,
   },
   divider: {
     width: '100%',
@@ -94,6 +106,15 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     padding: 8,
   },
+  description: {
+    display: 'flex',
+    flexShrink: 1,
+  },
+  descriptionIcon: {
+    alignSelf: 'flex-start',
+    paddingLeft: 8,
+    paddingRight: 16,
+  },
   icon: {
     paddingLeft: 8,
     paddingRight: 16,
@@ -109,6 +130,7 @@ export const styles = StyleSheet.create({
     color: Colors.inputPlaceholder,
     fontFamily: 'roboto',
     fontStyle: 'italic',
+    flex: 1,
   },
   descriptionSet: {
     fontSize: 16,
@@ -121,6 +143,7 @@ export const styles = StyleSheet.create({
     color: Colors.inputPlaceholder,
     fontFamily: 'roboto',
     fontStyle: 'italic',
+    flex: 1,
   },
   visibleLabel: {
     fontSize: 16,