From d52a53b5727c9cceccd7050dbae737d1fc47acb8 Mon Sep 17 00:00:00 2001
From: Jonas Schell <jonas@livekit.io>
Date: Thu, 19 Oct 2023 13:04:17 +0200
Subject: [PATCH] fix chat messages are not scrollable (#662)

---
 .changeset/orange-carpets-juggle.md            |  6 ++++++
 packages/react/src/prefabs/VideoConference.tsx |  2 +-
 packages/styles/scss/prefabs/chat.scss         | 17 +++++++++--------
 3 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/orange-carpets-juggle.md

diff --git a/.changeset/orange-carpets-juggle.md b/.changeset/orange-carpets-juggle.md
new file mode 100644
index 000000000..47c1a4035
--- /dev/null
+++ b/.changeset/orange-carpets-juggle.md
@@ -0,0 +1,6 @@
+---
+"@livekit/components-react": patch
+"@livekit/components-styles": patch
+---
+
+Fix chat messages are not scrollable.
diff --git a/packages/react/src/prefabs/VideoConference.tsx b/packages/react/src/prefabs/VideoConference.tsx
index 9c6410cbd..8d61ceb2d 100644
--- a/packages/react/src/prefabs/VideoConference.tsx
+++ b/packages/react/src/prefabs/VideoConference.tsx
@@ -140,7 +140,7 @@ export function VideoConference({
             <ControlBar controls={{ chat: true }} />
           </div>
           <Chat
-            style={{ display: widgetState.showChat ? 'flex' : 'none' }}
+            style={{ display: widgetState.showChat ? 'grid' : 'none' }}
             messageFormatter={chatMessageFormatter}
             messageEncoder={chatMessageEncoder}
             messageDecoder={chatMessageDecoder}
diff --git a/packages/styles/scss/prefabs/chat.scss b/packages/styles/scss/prefabs/chat.scss
index 272fe65a7..654df282d 100644
--- a/packages/styles/scss/prefabs/chat.scss
+++ b/packages/styles/scss/prefabs/chat.scss
@@ -1,22 +1,19 @@
 .chat {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
+  display: grid;
+  grid-template-rows: 1fr var(--control-bar-height);
   width: clamp(200px, 55ch, 60ch);
   background-color: var(--bg2);
   border-left: 1px solid var(--border-color);
+  align-items: end;
 }
 
 .chat-messages {
+  display: flex;
   width: 100%;
-  flex-grow: 1;
   max-height: 100%;
-  overflow: auto;
-  display: flex;
   flex-direction: column;
-  justify-content: flex-end;
   gap: 0.25rem;
-  margin-bottom: 0.5rem !important;
+  overflow: auto;
 }
 
 .chat-entry {
@@ -62,6 +59,10 @@
     text-decoration: underline;
     color: inherit;
   }
+
+  &:last-child {
+    margin-bottom: 0.25rem;
+  }
 }
 
 .chat-form {