spencer333
diff --git a/‎web-app/src/App.tsx
Lines changed: 4 additions & 16 deletions b/‎web-app/src/App.tsx
Lines changed: 4 additions & 16 deletions
diff --git a/‎web-app/src/Provider.tsx
Lines changed: 40 additions & 0 deletions b/‎web-app/src/Provider.tsx
Lines changed: 40 additions & 0 deletions
diff --git a/‎web-app/src/components/Workspace/index.tsx
Lines changed: 0 additions & 25 deletions b/‎web-app/src/components/Workspace/index.tsx
Lines changed: 0 additions & 25 deletions
diff --git a/‎web-app/src/containers/Loading/index.tsx
Lines changed: 6 additions & 4 deletions b/‎web-app/src/containers/Loading/index.tsx
Lines changed: 6 additions & 4 deletions
diff --git a/‎web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx
Lines changed: 1 addition & 1 deletion b/‎web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx
Lines changed: 1 addition & 1 deletion
diff --git a/‎web-app/src/containers/Tutorial/index.tsx
Lines changed: 3 additions & 3 deletions b/‎web-app/src/containers/Tutorial/index.tsx
Lines changed: 3 additions & 3 deletions
diff --git a/‎web-app/src/environment.ts
Lines changed: 3 additions & 0 deletions b/‎web-app/src/environment.ts
Lines changed: 3 additions & 0 deletions
diff --git a/‎web-app/stories/utils/ProviderDecorator.tsx
Lines changed: 0 additions & 15 deletions b/‎web-app/stories/utils/ProviderDecorator.tsx
Lines changed: 0 additions & 15 deletions
diff --git a/‎web-app/stories/utils/SideBarDecorator.tsx
Lines changed: 14 additions & 14 deletions b/‎web-app/stories/utils/SideBarDecorator.tsx
Lines changed: 14 additions & 14 deletions
@@ -1,23 +1,11 @@
 import * as React from 'react'
-import { ConfigProvider } from '@alifd/next'
-import enUS from '@alifd/next/lib/locale/en-us'
-import ErrorBoundary from './components/ErrorBoundary'
-import Workspace from './components/Workspace'
-import { ThemeProvider } from 'emotion-theming'
-import theme from './styles/theme'
+import Provider from './Provider'
 import Routes from './Routes'
 
 const App = () => (
-  /* @ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */
-  <ConfigProvider locale={enUS}>
-    <Workspace>
-      <ErrorBoundary>
-        <ThemeProvider theme={theme}>
-          <Routes />
-        </ThemeProvider>
-      </ErrorBoundary>
-    </Workspace>
-  </ConfigProvider>
+  <Provider>
+    <Routes />
+  </Provider>
 )
 
 export default App
@@ -0,0 +1,40 @@
+import * as React from 'react'
+import { css, jsx } from '@emotion/core'
+import { ConfigProvider } from '@alifd/next'
+import enUS from '@alifd/next/lib/locale/en-us'
+import ErrorBoundary from './components/ErrorBoundary'
+import { ThemeProvider } from 'emotion-theming'
+import { AdminProvider } from './services/admin/context'
+import theme, { Theme } from './styles/theme'
+
+type Props = {
+  children: React.ReactElement
+}
+
+const styles = {
+  page: (theme: Theme) => ({
+    display: 'flex' as 'flex',
+    position: 'relative' as 'relative',
+    margin: 0,
+    width: '100vw',
+    maxWidth: '100%',
+    minHeight: '100vh',
+    backgroundColor: theme['$color-white'],
+    overflow: 'auto',
+  }),
+}
+
+const Provider = (props: Props) => (
+  /* @ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */
+  <ConfigProvider locale={enUS}>
+    <div css={styles.page}>
+      <AdminProvider>
+        <ErrorBoundary>
+          <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+        </ErrorBoundary>
+      </AdminProvider>
+    </div>
+  </ConfigProvider>
+)
+
+export default Provider
@@ -11,17 +11,19 @@ interface Props {
 
 const styles = {
   page: {
-    position: 'relative' as 'relative',
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     alignItems: 'center' as 'center',
     justifyContent: 'center' as 'center',
-    height: '100vh',
-    width: '100vw',
+    position: 'absolute' as 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
   },
   processes: {
     padding: '0 1rem',
-    position: 'fixed' as 'fixed',
+    position: 'absolute' as 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
 
@@ -45,7 +45,7 @@ const styles = {
     paddingLeft: '1.1rem',
   },
   footer: (theme: Theme) => ({
-    position: 'fixed' as 'fixed',
+    position: 'absolute' as 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
 
@@ -56,23 +56,23 @@ const styles = {
     fontSize: '1rem',
     lineHeight: '1rem',
     padding: '10px 0rem',
-    position: 'fixed' as 'fixed',
+    position: 'absolute' as 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
     color: theme['$color-white'],
     zIndex: 1000,
   }),
   completeFooter: {
-    position: 'fixed' as 'fixed',
+    position: 'absolute' as 'absolute',
     bottom: 0,
     left: 0,
     right: 0,
     zIndex: 1000,
   },
   processes: (theme: Theme) => ({
     padding: '0 1rem',
-    position: 'fixed' as 'fixed',
+    position: 'absolute' as 'absolute',
     bottom: theme['$footer-height'],
     left: 0,
     right: 0,
 
@@ -14,3 +14,6 @@ export const TUTORIAL_LIST_URL: string = process.env.REACT_APP_TUTORIAL_LIST_URL
 
 // config variables
 export const DISPLAY_RUN_TEST_BUTTON = (process.env.CODEROAD_DISPLAY_RUN_TEST_BUTTON || 'true').toLowerCase() === 'true'
+
+export const ADMIN_MODE = true
+// (process.env.CODEROAD_ADMIN_MODE || process.env.STORYBOOK_ADMIN_MODE || '').toLowerCase() === 'true'
@@ -1,27 +1,27 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
-import { Provider } from './ProviderDecorator'
-import { ThemeProvider } from 'emotion-theming'
-import theme from '../../src/styles/theme'
+import Provider from '../../src/Provider'
 
 const styles = {
-  container: {
-    left: '25rem',
-    position: 'absolute' as 'absolute',
-    boxSizing: 'border-box' as 'border-box',
-    borderLeft: '2px solid black',
-    borderRight: '2px solid black',
+  limitedWidthContainer: {
+    left: 0,
+    top: 0,
+    position: 'fixed' as 'fixed',
+    borderRight: '1px solid black',
     width: '50rem',
-    height: window.innerHeight,
-    backgroundColor: 'white',
+    height: '100%',
+    // backgroundColor: 'white',
+  },
+  container: {
+    position: 'relative' as 'relative',
   },
 }
 
 const SideBarDecorator = (storyFn) => (
   <Provider>
-    <ThemeProvider theme={theme}>
-      <div css={styles.container}>{storyFn()}</div>
-    </ThemeProvider>
+    <div css={styles.container}>
+      <div css={styles.limitedWidthContainer}>{storyFn()}</div>
+    </div>
   </Provider>
 )