From 666f5f218ab3a0540318c2c76a5bcc61e83ac062 Mon Sep 17 00:00:00 2001
From: SleepWalker <mybox@udf.su>
Date: Sun, 9 Oct 2016 20:54:35 +0300
Subject: [PATCH] #182: fix body disposition due to scrollbar on small screens.
 Fix popup layout on mobile devices

---
 src/components/ui/popup/popup.scss |  7 ++++---
 src/index.scss                     |  1 -
 src/pages/profile/profile.scss     |  4 ----
 src/pages/root/RootPage.jsx        |  2 ++
 src/pages/root/root.scss           | 12 ++----------
 5 files changed, 8 insertions(+), 18 deletions(-)

diff --git a/src/components/ui/popup/popup.scss b/src/components/ui/popup/popup.scss
index 8432d86..c99a657 100644
--- a/src/components/ui/popup/popup.scss
+++ b/src/components/ui/popup/popup.scss
@@ -46,9 +46,9 @@ $popupMargin: 20px; // Отступ попапа от краёв окна
 }
 
 .popupWrapper {
-    box-sizing: content-box;
-    margin: $popupMargin auto;
-    padding: 0 $popupMargin;
+    box-sizing: border-box;
+    margin: 0 auto;
+    padding: $popupMargin;
 
     display: inline-block;
     width: 100%;
@@ -143,6 +143,7 @@ $popupInitPosition: translateY(10%) rotateX(-8deg);
 
 .trLeave {
     opacity: 1;
+    overflow: hidden;
 
     .popup {
         opacity: 1;
diff --git a/src/index.scss b/src/index.scss
index b791e07..9f91f8d 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -14,7 +14,6 @@ body {
     background: $light;
     color: #444;
     font-size: 16px;
-    overflow: hidden;
 }
 
 b {
diff --git a/src/pages/profile/profile.scss b/src/pages/profile/profile.scss
index cf0b9d6..01ae05e 100644
--- a/src/pages/profile/profile.scss
+++ b/src/pages/profile/profile.scss
@@ -1,8 +1,4 @@
 .container {
-    min-height: 100%;
-    position: relative;
-    box-sizing: border-box;
-
     padding: 55px 10px 65px; // 65px for footer
 }
 
diff --git a/src/pages/root/RootPage.jsx b/src/pages/root/RootPage.jsx
index afef0f4..0f6beec 100644
--- a/src/pages/root/RootPage.jsx
+++ b/src/pages/root/RootPage.jsx
@@ -22,6 +22,8 @@ if (process.env.NODE_ENV === 'production') {
 function RootPage(props) {
     const isRegisterPage = props.location.pathname === '/register';
 
+    document.body.style.overflow = props.isPopupActive ? 'hidden' : '';
+
     return (
         <div className={styles.root}>
             <div id="view-port" className={classNames(styles.viewPort, {
diff --git a/src/pages/root/root.scss b/src/pages/root/root.scss
index 24765f4..8edb797 100644
--- a/src/pages/root/root.scss
+++ b/src/pages/root/root.scss
@@ -5,19 +5,15 @@ $userBarHeight: 50px;
 
 .root {
     height: 100%;
-    overflow: hidden;
 }
 
 .viewPort {
     height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
 }
 
 .isPopupActive {
     filter: blur(5px);
     transition: filter 0.4s 0.1s ease;
-    overflow: hidden;
 }
 
 .wrapper {
@@ -55,14 +51,10 @@ $userBarHeight: 50px;
     composes: wrapper;
     position: relative;
 
-    // place for header
     min-height: 100%;
-    // hack to enable min-height/height 100% in parent elements
-    // http://stackoverflow.com/a/21836870/2039203
-    // http://stackoverflow.com/questions/2341821/height100-vs-min-height100
-    height: 0;
     box-sizing: border-box;
-    padding-top: $userBarHeight;
+
+    padding-top: $userBarHeight; // place for header
 }
 
 .userbar {