From 13a7081361f129a537d22c3966e5219745c175d1 Mon Sep 17 00:00:00 2001
From: Roland Osborne <roland.osborne@gmail.com>
Date: Wed, 28 Sep 2022 15:21:02 -0700
Subject: [PATCH] fixing styles on drawers

---
 app/mobile/src/session/cards/Cards.jsx        | 54 ++++++++++---------
 .../src/session/conversation/Conversation.jsx |  4 +-
 app/mobile/src/session/registry/Registry.jsx  | 46 ++++++++--------
 3 files changed, 56 insertions(+), 48 deletions(-)

diff --git a/app/mobile/src/session/cards/Cards.jsx b/app/mobile/src/session/cards/Cards.jsx
index c8eee8f6..3f53d9f3 100644
--- a/app/mobile/src/session/cards/Cards.jsx
+++ b/app/mobile/src/session/cards/Cards.jsx
@@ -83,33 +83,37 @@ export function Cards({ openRegistry, openContact }) {
         </>
       )}
       { !state.tabbed && (
-        <SafeAreaView edges={['top', 'right']} style={styles.searcharea}>
-          <View style={styles.searchbar}>
-            { state.sorting && (
-              <TouchableOpacity style={styles.sort} onPress={actions.unsort}>
-                <Ionicons style={styles.icon} name="menufold" size={18} color={Colors.text} />
+        <>
+          <View style={styles.searcharea}>
+            <SafeAreaView edges={['top', 'right']} style={styles.searchbar}>
+              { state.sorting && (
+                <TouchableOpacity style={styles.sort} onPress={actions.unsort}>
+                  <Ionicons style={styles.icon} name="menufold" size={18} color={Colors.text} />
+                </TouchableOpacity>
+              )}
+              { !state.sorting && (
+                <TouchableOpacity style={styles.sort} onPress={actions.sort}>
+                  <Ionicons style={styles.icon} name="menufold" size={18} color={Colors.disabled} />
+                </TouchableOpacity>
+              )}
+              <View style={styles.inputwrapper}>
+                <Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
+                <TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter}
+                    autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Contacts" />
+              </View>
+              <TouchableOpacity style={styles.add} onPress={openRegistry}>
+                <Ionicons name={'adduser'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
               </TouchableOpacity>
-            )}
-            { !state.sorting && (
-              <TouchableOpacity style={styles.sort} onPress={actions.sort}>
-                <Ionicons style={styles.icon} name="menufold" size={18} color={Colors.disabled} />
-              </TouchableOpacity>
-            )}
-            <View style={styles.inputwrapper}>
-              <Ionicons style={styles.icon} name="search1" size={16} color={Colors.disabled} />
-              <TextInput style={styles.inputfield} value={state.filter} onChangeText={actions.setFilter}
-                  autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Contacts" />
-            </View>
-            <TouchableOpacity style={styles.add} onPress={openRegistry}>
-              <Ionicons name={'adduser'} size={16} color={Colors.white} style={[styles.box, { transform: [ { rotateY: "180deg" }, ]} ]}/>
-            </TouchableOpacity>
+            </SafeAreaView>
           </View>
-          <FlatList style={styles.cards}
-            data={state.cards}
-            renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
-            keyExtractor={item => item.cardId}
-          />
-        </SafeAreaView>
+          <SafeAreaView edges={['right']} style={styles.searcharea}>
+            <FlatList style={styles.cards}
+              data={state.cards}
+              renderItem={({ item }) => <CardItem item={item} openContact={openContact} />}
+              keyExtractor={item => item.cardId}
+            />
+          </SafeAreaView>
+        </>
       )}
     </View>
   );
diff --git a/app/mobile/src/session/conversation/Conversation.jsx b/app/mobile/src/session/conversation/Conversation.jsx
index 647ec4c7..a0f9268b 100644
--- a/app/mobile/src/session/conversation/Conversation.jsx
+++ b/app/mobile/src/session/conversation/Conversation.jsx
@@ -20,7 +20,7 @@ export function ConversationHeader({ channel, closeConversation, openDetails })
   return (
     <View style={styles.title}>
       <View style={styles.subject}>
-        <Text style={styles.subjectText}>{ state.subject }</Text>
+        <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
       </View>
       <TouchableOpacity style={styles.action} onPress={setDetails}>
         <Ionicons name="setting" size={20} color={Colors.primary} />
@@ -48,7 +48,7 @@ export function Conversation({ channel, closeConversation, openDetails }) {
   return (
     <View style={styles.container}>
       <View style={styles.header}>
-        <Text style={styles.subjectText}>{ state.subject }</Text>
+        <Text style={styles.subjectText} numberOfLines={1} ellipsizeMode={'tail'}>{ state.subject }</Text>
         <TouchableOpacity style={styles.action} onPress={openDetails}>
           <Ionicons name="setting" size={20} color={Colors.primary} />
         </TouchableOpacity>
diff --git a/app/mobile/src/session/registry/Registry.jsx b/app/mobile/src/session/registry/Registry.jsx
index c8dee070..2fe6cba0 100644
--- a/app/mobile/src/session/registry/Registry.jsx
+++ b/app/mobile/src/session/registry/Registry.jsx
@@ -102,31 +102,35 @@ export function Registry({ closeRegistry, openContact }) {
         </>
       )}
       { !state.tabbed && (
-        <SafeAreaView edges={['right']}>
+        <>
           <View style={styles.searcharea}>
-            <View style={styles.searchbar}>
-              { state.busy && (
-                <View style={styles.search}>
-                  <ActivityIndicator />
+            <SafeAreaView edges={['right']}>
+              <View style={styles.searchbar}>
+                { state.busy && (
+                  <View style={styles.search}>
+                    <ActivityIndicator />
+                  </View>
+                )}
+                { !state.busy && (
+                  <TouchableOpacity style={styles.search} onPress={search}>
+                    <Ionicons name={'search1'} size={16} color={Colors.white} />
+                  </TouchableOpacity>
+                )}
+                <View style={styles.inputwrapper}>
+                  <TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
+                      autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Server" />
                 </View>
-              )}
-              { !state.busy && (
-                <TouchableOpacity style={styles.search} onPress={search}>
-                  <Ionicons name={'search1'} size={16} color={Colors.white} />
-                </TouchableOpacity>
-              )}
-              <View style={styles.inputwrapper}>
-                <TextInput style={styles.inputfield} value={state.server} onChangeText={actions.setServer}
-                    autoCapitalize="none" placeholderTextColor={Colors.disabled} placeholder="Server" />
               </View>
-            </View>
+            </SafeAreaView>
           </View>
-          <FlatList style={styles.accounts}
-            data={state.accounts}
-            renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />}
-            keyExtractor={item => item.guid}
-          />
-        </SafeAreaView>
+          <SafeAreaView edges={['right']}>
+            <FlatList style={styles.accounts}
+              data={state.accounts}
+              renderItem={({ item }) => <RegistryItem item={item} openContact={openContact} />}
+              keyExtractor={item => item.guid}
+            />
+          </SafeAreaView>
+        </>
       )}
     </View>
   );