Fix inconsistency: Fixes #343

graphql · Jul 14, 2018 · 759e5db · 759e5db
1 parent 27a033a
commit 759e5db
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx b/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx
@@ -313,7 +313,9 @@ class GraphQLEditor extends React.PureComponent<
                   isOpen={this.props.responseTracingOpen}
                   onMouseDown={this.handleTracingResizeStart}
                 >
-                  Tracing
+                  <VariableEditorSubtitle isOpen={false}>
+                    Tracing
+                  </VariableEditorSubtitle>
                 </ResponseTrackingTitle>
                 <ResponseTracing open={this.props.responseTracingOpen} />
               </ResponseTracking>
@@ -694,7 +696,7 @@ const BottomDrawerTitle = styled.div`
   letter-spacing: 0.53px;
   line-height: 14px;
   font-size: 14px;
-  padding: 14px 14px 5px 21px;
+  padding: 14px 14px 15px 21px;
   user-select: none;
 `
 
@@ -704,6 +706,9 @@ const VariableEditor = styled(BottomDrawer)`
     width: calc(100% - 12px);
     background: ${p => p.theme.editorColours.leftDrawerBackground};
   }
+  .CodeMirror-lines {
+    padding: 10px 0 20px 0;
+  }
   .CodeMirror-linenumbers {
     background: ${p => p.theme.editorColours.leftDrawerBackground};
   }
@@ -721,6 +726,9 @@ const VariableEditorSubtitle = withProps<TitleProps>()(styled.span)`
     p.isOpen
       ? p.theme.editorColours.drawerText
       : p.theme.editorColours.drawerTextInactive};
+  &:last-child {
+    margin-right: 0;
+  }
 `
 
 const ResponseTracking = styled(BottomDrawer)`

diff --git a/packages/graphql-playground-react/src/components/Playground/ResponseTracing.tsx b/packages/graphql-playground-react/src/components/Playground/ResponseTracing.tsx
@@ -37,7 +37,7 @@ export interface ReduxProps {
 }
 
 const TracingWrapper = styled.div`
-  padding-top: 16px;
+  padding-top: 6px;
   padding-left: 25px;
   padding-right: 25px;
   color: ${p => p.theme.editorColours.text};