fix(docz-theme-default): playground overflow on mobile

doczjs · Aug 12, 2018 · db1eb5b · db1eb5b
1 parent 78a19f6
commit db1eb5b
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/packages/docz-theme-default/src/components/ui/Pre.tsx b/packages/docz-theme-default/src/components/ui/Pre.tsx
@@ -39,6 +39,7 @@ const getChildren = (children: any) =>
 const Wrapper = styled('div')`
   margin: 30px 0;
   position: relative;
+  overflow-y: auto;
 `
 
 const Editor = styled(Codemirror)`
@@ -74,7 +75,6 @@ const Editor = styled(Codemirror)`
 
   .CodeMirror-linenumber {
     padding: 0 7px 0 5px;
-    opacity: 0.7;
   }
 `
 

diff --git a/packages/docz-theme-default/src/components/ui/Render/index.tsx b/packages/docz-theme-default/src/components/ui/Render/index.tsx
@@ -29,7 +29,7 @@ const whenFullscreen = (on: any, off: any) => (p: OverlayProps) =>
 
 const Overlay = styled('div')`
   z-index: ${whenFullscreen(9999, 0)};
-  position: ${whenFullscreen('fixed', 'initial')};
+  position: ${whenFullscreen('fixed', 'relative')};
   top: 0;
   left: 0;
   width: ${whenFullscreen('100vw', 'auto')};
@@ -49,12 +49,13 @@ const Wrapper = styled('div')`
 `
 
 const PlaygroundWrapper = styled('div')`
+  overflow-y: auto;
   position: relative;
   flex: 1;
-  overflow-y: hidden;
   border-radius: 4px 4px 0 0;
   border: 1px solid ${p => p.theme.docz.colors.border};
   background: ${p => p.theme.docz.colors.background};
+  min-height: 198px;
   ${p => p.theme.docz.mq(p.theme.docz.styles.playground)};
 `
 
@@ -272,7 +273,7 @@ export class Render extends Component<RenderComponentProps, RenderState> {
         mountStylesheet={false}
       >
         <Overlay full={fullscreen}>
-          {fullscreen && <ResizeBar onChangeSize={this.handleSetSize} />}
+          {fullscreen ? <ResizeBar onChangeSize={this.handleSetSize} /> : null}
           <Resizable {...this.resizableProps}>
             <Wrapper full={fullscreen}>
               <LiveConsumer>

diff --git a/packages/docz-theme-default/src/styles/codemirror/dark.ts b/packages/docz-theme-default/src/styles/codemirror/dark.ts
@@ -16,7 +16,7 @@ export const theme = () => css`
   .cm-s-docz-dark .CodeMirror-linenumber,
   .cm-s-docz-dark .CodeMirror-linenumbers {
     color: rgba(216, 222, 233, 0.4) !important;
-    background-color: transparent;
+    background-color: #2e3440;
   }
   .cm-s-docz-dark .CodeMirror-lines {
     color: #d8dee9 !important;

diff --git a/packages/docz-theme-default/src/styles/codemirror/light.ts b/packages/docz-theme-default/src/styles/codemirror/light.ts
@@ -21,6 +21,7 @@ export const theme = () => css`
 
   .cm-s-docz-light .CodeMirror-linenumber {
     color: #959da5;
+    background: #fbfcfd;
   }
 
   .cm-s-docz-light .CodeMirror-cursor {