Fix chat messages alignment issue

[thexahmed00]

Problem: Currently, in the chat application, the alignment of chat messages is inconsistent and doesn't display correctly. This affects the overall user experience as messages appear misaligned, making it challenging for users to follow conversations.

Expected Behavior: Chat messages should be consistently aligned to the left or right, depending on whether they are sent by the user or received from others. Proper alignment will improve the readability and usability of the chat interface.

Steps to Reproduce:

Launch the chat application. Start a conversation with another user. Observe how chat messages are displayed, noting the alignment inconsistencies. Screenshots:

Additional Information:

This issue was observed on both desktop and mobile devices. The problem affects all chat conversations. The issue started occurring after the recent update to the chat application.

Acceptance Criteria:

Chat messages are consistently aligned to the left (for received messages) or right (for sent messages). The alignment issue is resolved on both desktop and mobile devices. A visual test confirming proper alignment is included in the codebase. This issue is crucial for enhancing the user experience of our chat application. Let's work together to fix this alignment issue promptly.

[bemoche]

Hello @thexahmed00 can you please assign me to this issue. Thanx

[thexahmed00]

Thanks for your contribution, good work :) @bemoche