From 4557784f3e30492de6c33fa2767ceb3c4b9265ee Mon Sep 17 00:00:00 2001
From: Lizandro Guarnizo <77708265+lizandrogd@users.noreply.github.com>
Date: Sat, 24 Jan 2026 00:25:38 -0500
Subject: [PATCH] Update conversations.php

---
 conversations.php | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/conversations.php b/conversations.php
index 00b8383..791ca6d 100644
--- a/conversations.php
+++ b/conversations.php
@@ -735,7 +735,7 @@
 
             <div id="chat-area" style="display: none; height: 100%; flex-direction: column;">
                 <div class="chat-header">
-                        <button id="sidebar-toggle" class="btn btn-sm btn-outline-light d-md-none me-2" style="display:none; border-radius:8px; padding:6px 8px;" title="Volver a conversaciones"><i class="fas fa-bars"></i></button>
+                        <button id="sidebar-toggle" class="btn btn-sm btn-outline-light d-md-none me-2" style="border-radius:8px; padding:6px 8px;" title="Volver a conversaciones"><i class="fas fa-bars"></i></button>
                     <div class="chat-header-avatar" id="chat-avatar">
                         <i class="fas fa-user"></i>
                     </div>
@@ -1176,10 +1176,26 @@
                     });
                     // ensure sidebar hidden by default on small screens
                     const applyInitialMobile = () => {
+                        const chatAreaEl = document.getElementById('chat-area');
+                        const sidebarToggleBtn = document.getElementById('sidebar-toggle');
                         if (window.innerWidth <= 768) {
-                            sidebar.classList.add('mobile-hidden');
-                        } else {
+                            // On small screens, show the conversations list by default
                             sidebar.classList.remove('mobile-hidden');
+                            // hide chat area if no conversation selected; otherwise show chat and hide sidebar
+                            if (chatAreaEl) {
+                                if (!this.currentUserId) {
+                                    chatAreaEl.style.display = 'none';
+                                } else {
+                                    chatAreaEl.style.display = 'flex';
+                                    sidebar.classList.add('mobile-hidden');
+                                }
+                            }
+                            if (sidebarToggleBtn) sidebarToggleBtn.style.display = 'inline-block';
+                        } else {
+                            // Desktop: show both panels
+                            sidebar.classList.remove('mobile-hidden');
+                            if (chatAreaEl) chatAreaEl.style.display = this.currentUserId ? 'flex' : 'none';
+                            if (sidebarToggleBtn) sidebarToggleBtn.style.display = 'none';
                         }
                     };
                     applyInitialMobile();