#182: fix body disposition due to scrollbar on small screens. Fix popup layout on mobile devices

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;

src/index.scss

@@ -14,7 +14,6 @@ body {
     background: $light;
     color: #444;
     font-size: 16px;
-    overflow: hidden;
 }
 
 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
 }
 

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, {

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 {