adding close button to contact screen

app/mobile/src/session/contact/Contact.jsx

@@ -14,6 +14,13 @@ export function Contact({ contact, closeContact }) {
   return (
     <ScrollView>
       <SafeAreaView style={styles.container} edges={['top', 'bottom', 'right']}>
+        { state.tabbed && (
+          <View style={styles.close}>
+            <TouchableOpacity onPress={closeContact}>
+              <Ionicons name={'close'} size={24} color={Colors.text} />
+            </TouchableOpacity>
+          </View>
+        )}
         <View style={styles.header}>
           <Text style={styles.headerText}>{ `${state.handle}@${state.node}` }</Text>
         </View>

app/mobile/src/session/contact/Contact.styled.js

@@ -11,6 +11,12 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  close: {
+    width: '100%',
+    display: 'flex',
+    alignItems: 'flex-end',
+    paddingRight: 32,
+  },
   header: {
     paddingBottom: 32,
     paddingTop: 16,

app/mobile/src/session/contact/useContact.hook.js

@@ -1,10 +1,13 @@
 import { useState, useEffect, useRef, useContext } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { CardContext } from 'context/CardContext';
+import { useWindowDimensions } from 'react-native'
+import config from 'constants/Config';
 
 export function useContact(contact) {
 
   const [state, setState] = useState({
+    tabbed: null,
     name: null,
     handle: null,
     node: null,
@@ -14,12 +17,22 @@ export function useContact(contact) {
     status: null,
   });
 
+  const dimensions = useWindowDimensions();
   const card = useContext(CardContext);
 
   const updateState = (value) => {
     setState((s) => ({ ...s, ...value }));
   }
 
+  useEffect(() => {
+    if (dimensions.width > config.tabbedWidth) {
+      updateState({ tabbed: false });
+    }
+    else {
+      updateState({ tabbed: true });
+    }
+  }, [dimensions]);
+
   useEffect(() => {
     let stateSet = false;
     if (contact?.card) {