From 4c947fdd9c0147ed8ccc059f4c0077cfe0d45858 Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Sun, 12 Jan 2025 08:46:38 -0800
Subject: [PATCH] tweaking style for large layout

---
 .../mobile/src/conversation/Conversation.styled.ts       | 9 +++++++++
 app/client/mobile/src/conversation/Conversation.tsx      | 9 ++++++---
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/client/mobile/src/conversation/Conversation.styled.ts b/app/client/mobile/src/conversation/Conversation.styled.ts
index 7f6ce3ff..cedb7630 100644
--- a/app/client/mobile/src/conversation/Conversation.styled.ts
+++ b/app/client/mobile/src/conversation/Conversation.styled.ts
@@ -5,6 +5,9 @@ export const styles = StyleSheet.create({
   conversation: {
     flex: 1
   },
+  largeConversation: {
+    padding: 16,
+  },
   avoid: {
     width: '100%',
     height: '30%',
@@ -25,6 +28,7 @@ export const styles = StyleSheet.create({
     width: 40,
     height: 32,
     display: 'flex',
+    flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-end',
     gap: 4,
@@ -115,10 +119,15 @@ export const styles = StyleSheet.create({
   },
   header: {
     display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
     width: '100%',
     minWidth: 0,
     alignItems: 'center',
   },
+  largeHeader: {
+    height: 64,
+  },
   title: {
     display: 'flex',
     flexDirection: 'row',
diff --git a/app/client/mobile/src/conversation/Conversation.tsx b/app/client/mobile/src/conversation/Conversation.tsx
index fb9c58d0..a19b66c6 100644
--- a/app/client/mobile/src/conversation/Conversation.tsx
+++ b/app/client/mobile/src/conversation/Conversation.tsx
@@ -184,9 +184,12 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
     }
   });
 
+  const containerStyle = state.layout === 'large' ? { ...styles.conversation, ...styles.largeConversation } : styles.conversation;
+  const headerStyle = state.layout === 'large' ? { ...styles.header, ...styles.largeHeader } : styles.header;
+
   return (
-    <View style={styles.conversation}>
-      <SafeAreaView style={{ ...styles.header, flexDirection: wide ? 'row-reverse' : 'row' }}>
+    <View style={containerStyle}>
+      <SafeAreaView style={{ ...headerStyle, flexDirection: state.layout === 'large' ? 'row-reverse' : 'row' }}>
         <IconButton style={styles.icon} mode="contained" icon={wide ? 'close' : 'arrow-left'} size={28} onPress={onClose} />
         <View style={styles.status}>
         </View>
@@ -204,7 +207,7 @@ export function Conversation({close, openDetails, wide}: {close: ()=>void, openD
             <Text adjustsFontSizeToFit={true} numberOfLines={1} style={styles.unknown}>{ `, ${state.strings.unknownContact} (${state.unknownContacts})` }</Text>
           )}
         </View>
-        <View style={{ ...styles.status, flexDirection: wide ? 'row-reverse' : 'row' }}>
+        <View style={{ ...styles.status, flexDirection: state.layout === 'large' ? 'row-reverse' : 'row' }}>
           { state.detailSet && !state.access && (
             <Icon source="alert-circle-outline" size={20} color={Colors.offsync} />
           )}