From 75f9d69a7fab56b5414c24d2bc6f4f8ee175ec2b Mon Sep 17 00:00:00 2001
From: abrar-deakin <aaanw22@gmail.com>
Date: Thu, 30 Apr 2026 21:06:09 +1000
Subject: [PATCH 1/2] Fix chat message alignment

---
 guard_app/src/screen/MessagesScreen.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/guard_app/src/screen/MessagesScreen.tsx b/guard_app/src/screen/MessagesScreen.tsx
index 5cf9db7a8..f179a0078 100644
--- a/guard_app/src/screen/MessagesScreen.tsx
+++ b/guard_app/src/screen/MessagesScreen.tsx
@@ -296,9 +296,8 @@ export default function MessagesScreen() {
       Alert.alert('Error', 'Failed to send message');
     }
   };
-
   const renderMessage = ({ item }: { item: Message }) => (
-    <View style={styles.messageRow}>
+    <View style={[styles.messageRow, item.from === 'guard' ? styles.rowRight : styles.rowLeft]}>
       <View
         style={[styles.bubble, item.from === 'guard' ? styles.bubbleGuard : styles.bubbleEmployer]}
       >
@@ -645,7 +644,18 @@ const getStyles = (colors: AppColors) =>
     },
     newConversationBtnText: { color: colors.white, fontWeight: '700', fontSize: 13 },
 
-    messageRow: { marginBottom: 10 },
+    messageRow: {
+      marginBottom: 10,
+      flexDirection: 'row',
+    },
+
+    rowRight: {
+      justifyContent: 'flex-end',
+    },
+
+    rowLeft: {
+      justifyContent: 'flex-start',
+    },
     bubble: {
       maxWidth: '75%',
       padding: 12,

From 79710ac2b86a3dababce49f8de3ea20c02ab37b2 Mon Sep 17 00:00:00 2001
From: abrar-deakin <aaanw22@gmail.com>
Date: Thu, 7 May 2026 17:05:21 +1000
Subject: [PATCH 2/2] Fix chat message alignment logic

---
 guard_app/src/screen/MessagesScreen.tsx | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/guard_app/src/screen/MessagesScreen.tsx b/guard_app/src/screen/MessagesScreen.tsx
index f179a0078..6cc3880cf 100644
--- a/guard_app/src/screen/MessagesScreen.tsx
+++ b/guard_app/src/screen/MessagesScreen.tsx
@@ -39,6 +39,7 @@ type Message = {
   context: 'shift' | 'general';
   shiftTitle?: string;
   status?: 'sending' | 'sent' | 'delivered' | 'read';
+  isMe: boolean;
 };
 
 type ConversationItem = {
@@ -105,6 +106,7 @@ export default function MessagesScreen() {
     return {
       id: dto._id ?? `${dto.timestamp}-${senderId ?? 'unknown'}`,
       from: role,
+      isMe: Boolean(isCurrentUser),
       senderName: dto.sender?.name ?? dto.sender?.email ?? 'Unknown',
       text: dto.content,
       timestamp: dto.timestamp,
@@ -259,6 +261,7 @@ export default function MessagesScreen() {
     const newMsg: Message = {
       id: newId,
       from: currentUser?.role === 'employer' ? 'employer' : 'guard',
+      isMe: true,
       senderName: currentUser?.name ?? 'You',
       text: input.trim(),
       timestamp: new Date().toISOString(),
@@ -297,23 +300,17 @@ export default function MessagesScreen() {
     }
   };
   const renderMessage = ({ item }: { item: Message }) => (
-    <View style={[styles.messageRow, item.from === 'guard' ? styles.rowRight : styles.rowLeft]}>
-      <View
-        style={[styles.bubble, item.from === 'guard' ? styles.bubbleGuard : styles.bubbleEmployer]}
-      >
+    <View style={[styles.messageRow, item.isMe ? styles.rowRight : styles.rowLeft]}>
+      <View style={[styles.bubble, item.isMe ? styles.bubbleGuard : styles.bubbleEmployer]}>
         <Text style={styles.msgSender}>
           {item.senderName} • {item.from === 'guard' ? 'Guard' : 'Employer'}
         </Text>
-        <Text style={item.from === 'guard' ? styles.msgTextLight : styles.msgTextDark}>
-          {item.text}
-        </Text>
+        <Text style={item.isMe ? styles.msgTextLight : styles.msgTextDark}>{item.text}</Text>
         <View style={styles.metaRow}>
-          <Text style={item.from === 'guard' ? styles.msgTimeLight : styles.msgTimeDark}>
+          <Text style={item.isMe ? styles.msgTimeLight : styles.msgTimeDark}>
             {formatTime(item.timestamp)}
           </Text>
-          {item.from === 'guard' && item.status && (
-            <Text style={styles.msgStatus}>• {item.status}</Text>
-          )}
+          {item.isMe && item.status && <Text style={styles.msgStatus}>• {item.status}</Text>}
         </View>
       </View>
     </View>