diff --git a/src/components/chat_view/chat_view.scss b/src/components/chat_view/chat_view.scss
index 8cc74567e..c490546bc 100644
--- a/src/components/chat_view/chat_view.scss
+++ b/src/components/chat_view/chat_view.scss
@@ -1,6 +1,18 @@
 .chat-view {
   display: flex;
-  height: 100%;
+  margin-bottom: -1em;
+  margin-top: -1em;
+
+  .chat-list-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .top-spacer {
+    flex: 1 1 0;
+    min-height: 0;
+  }
 
   .chat-view-inner {
     height: auto;
diff --git a/src/components/chat_view/chat_view.vue b/src/components/chat_view/chat_view.vue
index aa2d90cbc..f24c892fd 100644
--- a/src/components/chat_view/chat_view.vue
+++ b/src/components/chat_view/chat_view.vue
@@ -35,15 +35,18 @@
             />
           </div>
         </div>
-        <ChatMessageList
-          header-date
-          :messages="messages"
-          :pending-messages="pendingMessages"
-          :replied-id="replyStatus?.id"
-          :focused-id="statusId"
-          @message-delete="deleteChatMessage"
-          @reply-requested="e => explicitReplyStatus = e"
-        />
+        <div class="chat-list-wrapper panel-body">
+          <div class="top-spacer" />
+          <ChatMessageList
+            header-date
+            :messages="messages"
+            :pending-messages="pendingMessages"
+            :replied-id="replyStatus?.id"
+            :focused-id="statusId"
+            @message-delete="deleteChatMessage"
+            @reply-requested="e => explicitReplyStatus = e"
+          />
+        </div>
         <div
           ref="footer"
           class="panel-body footer"