Fix mobile PostStream top scroll adjustment & remove App:before (#2385)

- remove App:before so we can use #app-navigation to access the mobile header
- fix mobile postStream scroll top margin adjustment

framework/core/js/src/forum/components/PostStream.js

@@ -287,7 +287,9 @@ export default class PostStream extends Component {
    * @return {Integer}
    */
   getMarginTop() {
-    return this.$() && $('#header').outerHeight() + parseInt(this.$().css('margin-top'), 10);
+    const headerId = app.screen() === 'phone' ? '#app-navigation' : '#header';
+
+    return this.$() && $(headerId).outerHeight() + parseInt(this.$().css('margin-top'), 10);
   }
 
   /**

framework/core/less/common/App.less

@@ -10,29 +10,23 @@
   }
 }
 
-// Fix a solid white box to the top of the viewport. This toolbar's contents
-// will differ depending on the device: on phones it will be content
-// controls, whereas on desktops it will be the header. We will overlay
-// these things on top of it later.
-.App:before {
-  content: " ";
-  .header-background();
-  border-bottom: 0;
-  position: absolute;
-
-  .affix& {
-    position: fixed;
-  }
-
-  .scrolled& {
-    .box-shadow(0 2px 6px @shadow-color);
-  }
-}
-
 // PHONES: Somewhere on the page there will be a .App-backControl, a
 // .App-primaryControl, and a .App-titleControl. We will position these on the
 // left, right, and center of the header respectively.
 @media @phone {
+  .App-navigation {
+    .header-background();
+    border-bottom: 0;
+    position: absolute;
+
+    .affix & {
+      position: fixed;
+    }
+
+    .scrolled & {
+      .box-shadow(0 2px 6px @shadow-color);
+    }
+  }
   .App-primaryControl, .App-titleControl, .App-backControl {
     position: absolute !important;
     z-index: @zindex-header + 1;
@@ -234,18 +228,18 @@
     display: none;
   }
   .App-header {
+    .header-background();
     padding: 8px;
-    height: @header-height;
     position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: @zindex-header;
-
+   
     .affix & {
       position: fixed;
     }
 
+    .scrolled & {
+      .box-shadow(0 2px 6px @shadow-color);
+    }
+
     & when (@config-colored-header = true) {
       .light-contents(@header-color, @header-control-bg, @header-control-color);
     }