Fix/docs overflow under project sidebar (#968)

* style: remove unnecessary space

* fix: doc's overflow under project sidebar

* refactor: remove condition always being true

Author: yoshiakis

packages/graphql-playground-react/src/components/Playground/EditorWrapper.tsx

@@ -807,7 +807,7 @@ const GlobalStyle = createGlobalStyle`
     box-shadow: none;
     margin-left: 0;
     position: relative;
-    z-index: 0; 
+    z-index: 0;
   }
 
   .CodeMirror-hint {
@@ -904,8 +904,12 @@ const GraphqlContainer = styled.div`
   width: 100%;
 `
 
-export const Container = ({ children }) => (
-  <GraphqlContainer>{children}</GraphqlContainer>
+interface Props {
+  setRef?: (ref: any) => void
+}
+
+export const Container: React.SFC<Props> = ({ children, setRef }) => (
+  <GraphqlContainer ref={setRef}>{children}</GraphqlContainer>
 )
 
 export default Wrapper

packages/graphql-playground-react/src/components/Playground/ExplorerTabs/SideTabs.tsx

@@ -39,6 +39,7 @@ export interface Props {
   schema: GraphQLSchema
   sessionId: string
   children: Array<React.ReactElement<any>>
+  maxWidth: number
 }
 
 export interface SideTabContentProps {
@@ -77,7 +78,7 @@ class SideTabs extends React.Component<
       const width = this.activeContentComponent.getWidth(props)
       this.props.changeWidthDocs(
         props.sessionId,
-        Math.min(width, window.innerWidth - 86),
+        Math.min(width, this.props.maxWidth),
       )
     })
   }

packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx

@@ -139,6 +139,7 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
   private responseResizer: any
   private queryVariablesRef
   private httpHeadersRef
+  private containerComponent
 
   componentDidMount() {
     // Ensure a form of a schema exists (including `null`) and
@@ -166,7 +167,7 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
 
   render() {
     return (
-      <Container>
+      <Container setRef={this.setContainerComponent}>
         <EditorWrapper>
           <TopBar
             shareEnabled={this.props.shareEnabled}
@@ -264,21 +265,23 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
             </ResultWrap>
           </EditorBar>
         </EditorWrapper>
-        <SideTabs>
-          <SideTab label="Docs" activeColor="green" tabWidth="49px">
-            <GraphDocs
-              schema={this.props.schema}
-              ref={this.setDocExplorerRef}
-            />
-          </SideTab>
-          <SideTab label="Schema" activeColor="blue" tabWidth="65px">
-            <SDLView
-              schema={this.props.schema}
-              ref={this.setSchemaExplorerRef}
-              sessionId={this.props.sessionId}
-            />
-          </SideTab>
-        </SideTabs>
+        {this.containerComponent && (
+          <SideTabs maxWidth={this.containerComponent.offsetWidth - 86}>
+            <SideTab label="Docs" activeColor="green" tabWidth="49px">
+              <GraphDocs
+                schema={this.props.schema}
+                ref={this.setDocExplorerRef}
+              />
+            </SideTab>
+            <SideTab label="Schema" activeColor="blue" tabWidth="65px">
+              <SDLView
+                schema={this.props.schema}
+                ref={this.setSchemaExplorerRef}
+                sessionId={this.props.sessionId}
+              />
+            </SideTab>
+          </SideTabs>
+        )}
       </Container>
     )
   }
@@ -330,6 +333,9 @@ class GraphQLEditor extends React.PureComponent<Props & ReduxProps> {
       this.schemaExplorerComponent = ref.getWrappedInstance()
     }
   }
+  setContainerComponent = ref => {
+    this.containerComponent = ref
+  }
 
   handleClickReference = reference => {
     if (this.docExplorerComponent) {