Fixed mobile view

Author: aeagle

demo/src/App.scss

@@ -122,22 +122,16 @@ pre {
 		}
 	}
 
-	.sidebar {
-		display: none;
+	.sidebar-container {
+		display: none !important;
 	}
 
-	.all-content {
-		top: 0px !important;
+	.docs-main-container {
+		left: 0 !important;
+		top: 0 !important;
 	}
 
-	.main {
-		position: fixed;
-		left: inherit !important;
-		right: inherit !important;
-		top: 80px !important;
-		bottom: inherit !important;
-		height: inherit !important;
-		width: 100% !important;
-		overflow: auto !important;
+	.all-content {
+		top: 0px !important;
 	}
 }

demo/src/docs/Docs.tsx

@@ -50,7 +50,7 @@ export const Docs = () => {
             </div>
 
           </Space.Left>
-          <Space.Fill className="main" scrollable={true} style={{ padding: 30, paddingTop: 0 }}>
+          <Space.Fill className="docs-main" scrollable={true} style={{ padding: 30, paddingTop: 0 }}>
 
             <Intro />
             <GettingStarted />

demo/src/ui-demo/UI.tsx

@@ -44,7 +44,8 @@ const Editor: React.FC = (props) => {
 	const [ code, setCode ] = React.useState('import * as React from \'react\';\r\nimport * as Space from \'react-spaces\';\r\n\r\nexport const App = () => {\r\n    <Space.ViewPort>\r\n        <Space.Top size={30}>\r\n            Hello!\r\n        </Space.Top>\r\n        <Space.Fill>\r\n            World!\r\n        </Space.Fill>\r\n    </Space.ViewPort>\r\n}');
 
     const options = {
-		selectOnLineNumbers: true
+		selectOnLineNumbers: true,
+		automaticLayout: true
 	};
 
 	return  (