fixed overlay & primaryLayout on mobile mode

src/components/Layout/Overlay/index.js

@@ -134,7 +134,7 @@ export default class Overlay extends React.PureComponent {
         <div
           id="Overlay_layout"
           ref={this.setWrapperRef}
-          className={classnames(styles.Overlay_wrapper)}
+          className={classnames(styles.Overlay_wrapper, {[styles.undocked]: window.isMobile})}
         >
             {renderElement()}
         </div>

src/components/Layout/Overlay/index.less

@@ -59,6 +59,10 @@
     }
   }
 
+  &.undocked {
+    display: none;
+  }
+  
   &.expand{
     max-width: calc(100% + 150px);
   }

src/layouts/PrimaryLayout.js

@@ -85,11 +85,13 @@ class PrimaryLayout extends React.Component {
     this.enquireHandler = enquireScreen(mobile => {
       const { isMobile } = this.state
       if (isMobile !== mobile) {
+        window.isMobile = mobile
         this.setState({
           isMobile: mobile,
         })
       }
     })
+    
   }
 
   componentWillUnmount() {
@@ -133,8 +135,9 @@ class PrimaryLayout extends React.Component {
             opacity: currentTheme.backgroundImage.opacity
           }} /> : null}
         <antd.Layout id="app" className={classnames(styles.app, {
-          [styles.interfaced]: this.props.app.electron,
-          [styles.dark_mode]: window.darkMode
+          [styles.interfaced]: this.props.app.embedded,
+          [styles.dark_mode]: window.darkMode,
+          [styles.mobile]: isMobile
         })}>
           <Sider {...SiderProps} />
           <div className={styles.primary_layout_container}>

src/layouts/PrimaryLayout.less

@@ -10,7 +10,8 @@
   // overflow-y: overlay;
 
   width: auto;
-  height: 98%;
+  height: 100%;
+  padding: 15px 0;
   align-self: baseline;
 
   position: relative;

src/theme/base/index.less

@@ -38,8 +38,25 @@
 
 .app{
   &.interfaced{
-    height: calc(100% - @AppTheme_global_winavbar_height)!important;
+    .primary_layout_container{
+      height: 98%;
+      //height: calc(100% - @AppTheme_global_winavbar_height)!important;
+    }
   }
+
+  &.mobile{
+    .primary_layout_container {
+      width: 100%;
+      padding: 0;
+      overflow-y: overlay;
+      overflow-x: hidden;
+      min-width: unset;
+    }
+    .primary_layout_content{
+      padding: 35px 15px 15px;
+    }
+  }
+
   &.dark_mode{
    
     :global{
@@ -67,19 +84,6 @@
   width: 100vw;
 
   transition: all @__Global_Components_transitions_dur linear;
-
-  &.mobile{
-    >.primary_layout_container {
-      padding: 0;
-      overflow-y: overlay;
-      overflow-x: hidden;
-      min-width: unset;
-    }
-    .primary_layout_content{
-      padding: 35px 15px 15px;
-    }
-  }
-
 }