diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js
index 7eb6be45a..7997bca2e 100644
--- a/app/soapbox/features/chats/components/chat_window.js
+++ b/app/soapbox/features/chats/components/chat_window.js
@@ -69,9 +69,13 @@ class ChatWindow extends ImmutablePureComponent {
- {chatMessages.map(chatMessage =>
-
{chatMessage.get('content')}
- )}
+ {chatMessages.map(chatMessage => (
+
+
+ {chatMessage.get('content')}
+
+
+ ))}
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index ec62ba6b5..6ce047d3a 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -69,10 +69,11 @@
}
&__content {
- height: 100%;
background: var(--foreground-color);
display: flex;
+ flex: 1;
flex-direction: column;
+ overflow: hidden;
}
&__actions {
@@ -93,3 +94,18 @@
}
}
}
+
+.chat-messages {
+ overflow-y: scroll;
+}
+
+.chat-message {
+ margin: 14px 10px;
+
+ &__bubble {
+ padding: 4px 10px;
+ max-width: 70%;
+ border-radius: 10px;
+ background-color: var(--background-color);
+ }
+}