diff --git a/src/components/MessageList/MessageList.jsx b/src/components/MessageList/MessageList.jsx
index cbd89a0c1..cd85229ec 100644
--- a/src/components/MessageList/MessageList.jsx
+++ b/src/components/MessageList/MessageList.jsx
@@ -57,8 +57,9 @@ class MessageList extends Component {
   componentDidMount() {
     const { scrollPosition } = this.props
     const panelMessages = this.refs.panelMessages
-    // 145 = 60 for topbar + 45 for panel title + 20px for margin between topbar and left panel + 10px padding
-    panelMessages.style.height = (window.innerHeight - 145) + 'px'
+    // 215 = 60 for topbar + 45 for panel title + 20px for margin between topbar and left panel + 10px padding
+    // + 60px footer + 10px margin bw footer and left panel
+    panelMessages.style.height = (window.innerHeight - 215) + 'px'
     if (scrollPosition) {
       // We use requestAnimationFrame because this function may be executed before
       // the DOM elements are actually drawn.
diff --git a/src/projects/detail/Messages.scss b/src/projects/detail/Messages.scss
index be8e80b37..532e2fa7a 100644
--- a/src/projects/detail/Messages.scss
+++ b/src/projects/detail/Messages.scss
@@ -18,7 +18,7 @@
   @include flexBox;
   max-width: 1110px;
   margin: 20px auto;
-  height: calc(100% - 20px);// 20px is for bottom margin
+  height: calc(100% - 80px);// 20px is for bottom margin, 60px for footer
   
   .left-area {
     @include flexWidth(1);