Chats: start styling ChatWindow

app/soapbox/features/chats/components/chat_window.js

@@ -69,9 +69,13 @@ class ChatWindow extends ImmutablePureComponent {
         </div>
         <div className='pane__content'>
           <div className='chat-messages'>
-            {chatMessages.map(chatMessage =>
+            {chatMessages.map(chatMessage => (
-              <div class='chat-message'>{chatMessage.get('content')}</div>
+              <div className='chat-message' key={chatMessage.get('id')}>
-            )}
+                <span className='chat-message__bubble'>
+                  {chatMessage.get('content')}
+                </span>
+              </div>
+            ))}
           </div>
           <div className='pane__actions'>
             <input type='text' placeholder='Send a message...' />

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);
+  }
+}