From 0adc0529c8e25f2691677b1569e7f26dfb7078ba Mon Sep 17 00:00:00 2001
From: ocupe <jonas@livekit.io>
Date: Thu, 19 Oct 2023 10:02:58 +0200
Subject: [PATCH 1/3] fix chat messages are not scrollable

---
 packages/react/src/prefabs/VideoConference.tsx |  2 +-
 packages/styles/scss/prefabs/chat.scss         | 18 +++++++++---------
 2 files changed, 10 insertions(+), 10 deletions(-)

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..4db78f89e 100644
--- a/packages/styles/scss/prefabs/chat.scss
+++ b/packages/styles/scss/prefabs/chat.scss
@@ -1,7 +1,6 @@
 .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);
@@ -9,14 +8,11 @@
 
 .chat-messages {
   width: 100%;
-  flex-grow: 1;
   max-height: 100%;
-  overflow: auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
+  display: grid;
+  grid-auto-rows: min-content;
   gap: 0.25rem;
-  margin-bottom: 0.5rem !important;
+  overflow: auto;
 }
 
 .chat-entry {
@@ -62,6 +58,10 @@
     text-decoration: underline;
     color: inherit;
   }
+
+  &:last-child {
+    margin-bottom: 0.25rem;
+  }
 }
 
 .chat-form {

From be50d55cad349d0b313b65b49bd009324bf463ae Mon Sep 17 00:00:00 2001
From: Jonas Schell <jonas@livekit.io>
Date: Thu, 19 Oct 2023 10:04:39 +0200
Subject: [PATCH 2/3] Create orange-carpets-juggle.md

---
 .changeset/orange-carpets-juggle.md | 6 ++++++
 1 file changed, 6 insertions(+)
 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.

From 0b2b4bda294642a9bc3182cefeb073af0d73826d Mon Sep 17 00:00:00 2001
From: ocupe <jonas@livekit.io>
Date: Thu, 19 Oct 2023 10:36:11 +0200
Subject: [PATCH 3/3] fix scroll

---
 packages/styles/scss/prefabs/chat.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/styles/scss/prefabs/chat.scss b/packages/styles/scss/prefabs/chat.scss
index 4db78f89e..654df282d 100644
--- a/packages/styles/scss/prefabs/chat.scss
+++ b/packages/styles/scss/prefabs/chat.scss
@@ -4,13 +4,14 @@
   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%;
   max-height: 100%;
-  display: grid;
-  grid-auto-rows: min-content;
+  flex-direction: column;
   gap: 0.25rem;
   overflow: auto;
 }