From 3d597f9fab665d8c0b1ad7384d30959ead9439dc Mon Sep 17 00:00:00 2001
From: Wadim Kalmykov <36057469+w-4@users.noreply.github.com>
Date: Sun, 15 Nov 2020 05:21:38 +0700
Subject: [PATCH] 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
---
 .../js/src/forum/components/PostStream.js     |  4 +-
 framework/core/less/common/App.less           | 44 ++++++++-----------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/framework/core/js/src/forum/components/PostStream.js b/framework/core/js/src/forum/components/PostStream.js
index b889988ce..77a45320b 100644
--- a/framework/core/js/src/forum/components/PostStream.js
+++ b/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);
   }
 
   /**
diff --git a/framework/core/less/common/App.less b/framework/core/less/common/App.less
index b20588ac8..331af8f16 100644
--- a/framework/core/less/common/App.less
+++ b/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);
     }