Fixed center channel height magic. Fixes tutorial

8 files changed, 14 insertions, 11 deletions

diff --git a/web/react/components/center_panel.jsx b/web/react/components/center_panel.jsx
index 242c2c637..ea0eec747 100644
--- a/web/react/components/center_panel.jsx
+++ b/web/react/components/center_panel.jsx
@@ -61,9 +61,7 @@ export default class CenterPanel extends React.Component {
                         <div id='channel-header'>
                             <ChannelHeader />
                         </div>
-                        <div id='post-list'>
-                            {postsContainer}
-                        </div>
+                        {postsContainer}
                         <div
                             className='post-create__container'
                             id='post-create'
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index 1545cdfaa..4d1874e18 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -236,8 +236,6 @@ export default class CreatePost extends React.Component {
         PostStore.storeCurrentDraft(draft);
     }
     resizePostHolder() {
-        const height = this.state.windowHeight - $(ReactDOM.findDOMNode(this.refs.topDiv)).height() - 50;
-        $('.post-list-holder-by-time').css('height', `${height}px`);
         if (this.state.windowWidth > 960) {
             $('#post_textbox').focus();
         }
diff --git a/web/react/components/posts_view_container.jsx b/web/react/components/posts_view_container.jsx
index 301057990..761664602 100644
--- a/web/react/components/posts_view_container.jsx
+++ b/web/react/components/posts_view_container.jsx
@@ -261,7 +261,7 @@ export default class PostsViewContainer extends React.Component {
         }
 
         return (
-            <div>{postListCtls}</div>
+            <div id='post-list'>{postListCtls}</div>
         );
     }
 }
diff --git a/web/sass-files/sass/partials/_content.scss b/web/sass-files/sass/partials/_content.scss
index 49b3916a9..d86e225f3 100644
--- a/web/sass-files/sass/partials/_content.scss
+++ b/web/sass-files/sass/partials/_content.scss
@@ -18,15 +18,15 @@
 	margin-left: 220px;
 	position: relative;
 	background: #fff;
+    display: flex;
+    flex-direction: column;
 	.channel__wrap & {
 		padding-top: 0;
 	}
 }
 #post-create {
+    flex: 0 0 auto;
 	background: #fff;
-	position: absolute;
-	bottom: 0;
-	left: 0;
 	width: 100%;
 	z-index: 3;
 }
@@ -61,4 +61,4 @@
 
 .delete-message-text {
 	margin-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/web/sass-files/sass/partials/_headers.scss b/web/sass-files/sass/partials/_headers.scss
index 5c8313454..74a7cecff 100644
--- a/web/sass-files/sass/partials/_headers.scss
+++ b/web/sass-files/sass/partials/_headers.scss
@@ -1,6 +1,7 @@
 #channel-header {
     padding: 3px 0;
     height: 58px;
+    flex: 0 0 58px;
 }
 .row {
 	&.header {
diff --git a/web/sass-files/sass/partials/_markdown.scss b/web/sass-files/sass/partials/_markdown.scss
index 87e809694..241377252 100644
--- a/web/sass-files/sass/partials/_markdown.scss
+++ b/web/sass-files/sass/partials/_markdown.scss
@@ -9,6 +9,7 @@
 	}
 }
 .markdown-inline-img {
+    -moz-force-broken-image-icon: 1;
     max-height: 500px;
     height: 500px;
 }
diff --git a/web/sass-files/sass/partials/_post.scss b/web/sass-files/sass/partials/_post.scss
index e11f9b640..ad31e3eb6 100644
--- a/web/sass-files/sass/partials/_post.scss
+++ b/web/sass-files/sass/partials/_post.scss
@@ -182,12 +182,16 @@ body.ios {
 }
 
 #post-list {
+    flex: 1 1 auto;
+    position: relative;
+    overflow-y: hidden;
 	.post-list-holder-by-time {
 		background: #fff;
 		overflow-y: scroll;
 		width: 100%;
 		padding: 1em 0 0;
-		position: relative;
+		position: absolute;
+        height: 100%;
 		-webkit-overflow-scrolling: touch;
 		&::-webkit-scrollbar {
 			width: 0px !important;
diff --git a/web/sass-files/sass/partials/_videos.scss b/web/sass-files/sass/partials/_videos.scss
index bcfc28f19..bb36b6223 100644
--- a/web/sass-files/sass/partials/_videos.scss
+++ b/web/sass-files/sass/partials/_videos.scss
@@ -52,6 +52,7 @@
 }
 
 .gif-div {
+    -moz-force-broken-image-icon: 1;
     position:relative;
     max-width: 450px;
     max-height: 500px;