From 1e3b188d90e5c0e30209fcfd312e7e7e8aef942e Mon Sep 17 00:00:00 2001
From: Juan Sebastian Montoya <juansmm@outlook.com>
Date: Thu, 6 Mar 2025 23:45:25 -0500
Subject: [PATCH] feat: improve chat room UI and scrolling behavior

- Added automatic scrolling to bottom of messages in chat room
- Updated CSS to handle app and chat container height more precisely
- Implemented scrollToBottom function for messages container
- Ensured messages scroll automatically on new message or send
- Removed unnecessary port mapping in docker-compose.yml
---
 apps/web/src/App.css                  |  8 ++++++--
 apps/web/src/components/chat-room.tsx | 17 ++++++++++++++++-
 docker-compose.yml                    |  2 --
 3 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/App.css b/apps/web/src/App.css
index 1c6353a..7a6fa02 100644
--- a/apps/web/src/App.css
+++ b/apps/web/src/App.css
@@ -65,7 +65,8 @@ body {
 .app {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: calc(100vh - 4rem);
+  overflow: hidden;
 }
 
 .app-header {
@@ -81,6 +82,8 @@ body {
 .app-main {
   flex: 1;
   padding: 1rem;
+  height: 100%;
+  overflow: hidden;
 }
 
 /* Auth styles */
@@ -185,7 +188,8 @@ button:disabled {
 /* Chat styles */
 .chat-container {
   display: flex;
-  height: calc(100vh - 120px);
+  height: 100%;
+  max-height: calc(100vh - 120px);
   background-color: var(--card-background);
   border-radius: 0.5rem;
   overflow: hidden;
diff --git a/apps/web/src/components/chat-room.tsx b/apps/web/src/components/chat-room.tsx
index fff8cb4..454ddad 100644
--- a/apps/web/src/components/chat-room.tsx
+++ b/apps/web/src/components/chat-room.tsx
@@ -80,6 +80,13 @@ export function ChatRoom(props: ChatRoomProps) {
   const [messages, setMessages] = createSignal<Message[]>([]);
   const [confirmLeave, setConfirmLeave] = createSignal(false);
   const [leaveError, setLeaveError] = createSignal<string | null>(null);
+  let messagesContainer: HTMLDivElement | undefined;
+
+  const scrollToBottom = () => {
+    if (messagesContainer) {
+      messagesContainer.scrollTop = messagesContainer.scrollHeight;
+    }
+  };
 
   // Query room details
   const [roomQuery] = createQuery({
@@ -121,12 +128,19 @@ export function ChatRoom(props: ChatRoomProps) {
     }
   });
 
+  createEffect(() => {
+    if (messages().length > 0) {
+      scrollToBottom();
+    }
+  });
+
   // Handle new messages from subscription
   createEffect(() => {
     const result = messageSubscription;
     if (result.data?.messageAdded) {
       const newMessage = result.data.messageAdded;
       setMessages((prev) => [...prev, newMessage]);
+      scrollToBottom();
     }
   });
 
@@ -149,6 +163,7 @@ export function ChatRoom(props: ChatRoomProps) {
         roomId: props.roomId,
       });
       setMessage('');
+      scrollToBottom();
     } catch (error) {
       console.error('Failed to send message:', error);
     }
@@ -209,7 +224,7 @@ export function ChatRoom(props: ChatRoomProps) {
         </div>
       </Show>
 
-      <div class='chat-messages'>
+      <div class='chat-messages' ref={messagesContainer}>
         <Show
           when={!roomQuery.fetching}
           fallback={<div>Loading messages...</div>}
diff --git a/docker-compose.yml b/docker-compose.yml
index c52df99..c376116 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -28,8 +28,6 @@ services:
       - NODE_ENV=production
       - VITE_API_URL=https://chat-api.jusemon.com/graphql
       - VITE_WS_URL=wss://chat-api.jusemon.com/graphql
-    ports:
-      - "5173:5173"
     networks:
       - default-network