From bf97061a388e475aa24ab811072bfb42d6f75c1c Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Fri, 20 Mar 2026 02:41:07 +0530
Subject: [PATCH] feat: Implement mobile responsive layout for the messaging
 page, enabling toggling between the conversation list and chat view on
 smaller screens.

---
 src/components/message/MessagingPage.tsx | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/components/message/MessagingPage.tsx b/src/components/message/MessagingPage.tsx
index f24e916..9dc05cf 100644
--- a/src/components/message/MessagingPage.tsx
+++ b/src/components/message/MessagingPage.tsx
@@ -163,6 +163,7 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
   const [isStartingConversation, setIsStartingConversation] = useState<string | null>(null);
   const [isComposeOpen, setIsComposeOpen] = useState(false);
   const [isReportModalOpen, setIsReportModalOpen] = useState(false);
+  const [showMobileChat, setShowMobileChat] = useState(false);
   // Store converted avatar URLs by conversation ID
   const [conversationAvatarUrls, setConversationAvatarUrls] = useState<Record<string, string>>({});
   // Store converted file URLs by message ID (for S3-stored images/files)
@@ -314,6 +315,7 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
     ) {
       initialConvHandledRef.current = initialConversationId;
       selectConversation(initialConversationId);
+      setShowMobileChat(true);
     }
   }, [initialConversationId, conversations, isLoading, selectConversation]);
 
@@ -687,8 +689,8 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
 
         {/* Main content */}
         <div className="flex h-[700px]">
-          {/* Left sidebar - Conversation list */}
-          <div className="w-[380px] border-r border-[#00293d]/10 flex-shrink-0 overflow-hidden flex flex-col">
+          {/* Left sidebar - Conversation list (hidden on mobile when chat is open) */}
+          <div className={`w-full md:w-[380px] border-r border-[#00293d]/10 flex-shrink-0 overflow-hidden flex flex-col ${showMobileChat ? 'hidden md:flex' : 'flex'}`}>
             {isLoading || isLoadingAgents ? (
               <div className="flex-1 flex items-center justify-center">
                 <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[#00293d]" />
@@ -779,7 +781,7 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
                 {filteredConversations.map((conversation) => (
                   <div
                     key={conversation.id}
-                    onClick={() => selectConversation(conversation.id)}
+                    onClick={() => { selectConversation(conversation.id); setShowMobileChat(true); }}
                     className="relative flex items-start gap-3 p-4 rounded-[15px] cursor-pointer transition-colors hover:bg-[#00293d]/5"
                     style={{ border: '1px solid rgba(0, 41, 61, 0.1)' }}
                   >
@@ -837,10 +839,20 @@ export function MessagingPage({ initialConversationId }: { initialConversationId
             )}
           </div>
 
-          {/* Right panel - Chat area */}
-          <div className="flex-1 flex flex-col p-4">
+          {/* Right panel - Chat area (full width on mobile, hidden when no conversation on mobile) */}
+          <div className={`flex-1 flex flex-col p-4 ${showMobileChat ? 'flex' : 'hidden md:flex'}`}>
             {currentConversation && selectedUserInfo ? (
               <>
+                {/* Mobile back button */}
+                <button
+                  onClick={() => setShowMobileChat(false)}
+                  className="md:hidden flex items-center gap-2 mb-3 hover:opacity-70 transition-opacity cursor-pointer"
+                >
+                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
+                    <path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="#00293D" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                  </svg>
+                  <span className="font-fractul font-medium text-[14px] text-[#00293D]">Back</span>
+                </button>
                 {/* Chat header */}
                 <ChatHeader
                   {...selectedUserInfo}