Merge pull request #1724 from asaadmahmoodspin/sidebarFix

Fixing IE scrolling issue and also fixing horizontal scrollbar

web/react/components/posts_view.jsx

@@ -233,7 +233,8 @@ export default class PostsView extends React.Component {
             window.requestAnimationFrame(() => {
                 // If separator exists scroll to it. Otherwise scroll to bottom.
                 if (this.refs.newMessageSeparator) {
-                    this.refs.newMessageSeparator.scrollIntoView();
+                    var objDiv = this.refs.postlist;
+                    objDiv.scrollTop = this.refs.newMessageSeparator.offsetTop; //scrolls node to top of Div
                 } else {
                     this.refs.postlist.scrollTop = this.refs.postlist.scrollHeight;
                 }

web/sass-files/sass/partials/_base.scss

@@ -8,7 +8,7 @@ body {
   font-family: 'Open Sans', sans-serif;
   -webkit-font-smoothing: antialiased;
   background: $body-bg;
-  position: absolute;
+  position: relative;
   width: 100%;
   height: 100%;
   &.white {
@@ -36,11 +36,13 @@ body {
 .container-fluid {
     @include legacy-pie-clearfix;
     height: 100%;
+    position: relative;
 }
 
 .channel-view {
     @include clearfix;
     height: 100%;
+    position: relative;
 }
 
 img {

web/sass-files/sass/partials/_responsive.scss

@@ -54,9 +54,7 @@
 @media screen and (max-width: 960px) {
 
     .sidebar--right {
-        width: 400px;
         z-index: 5;
-        right: 0;
         @include translateX(100%);
 
         &.move--left {

web/sass-files/sass/partials/_sidebar--right.scss

@@ -1,17 +1,17 @@
 @charset "UTF-8";
 
 .sidebar--right {
-    position: absolute;
+    position: fixed;
     width: 400px;
     height: 100%;
     right: 0px;
     padding: 0;
     background: #fff;
     @include single-transition(transform, 0.5s, ease);
-    right: -320px;
+    @include translateX(400px);
 
     &.move--left {
-        right: 0;
+        @include translateX(0);
     }
 
     .post-body {