fix chat messages are not scrollable (#662)

livekit · Oct 19, 2023 · d52a53b · d52a53b
1 parent 1f7a171
commit d52a53b
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 9 deletions.
diff --git a/.changeset/orange-carpets-juggle.md 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
@@ -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
@@ -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 {