diff --git a/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx b/packages/graphql-playground-react/src/components/Playground/GraphQLEditor.tsx
index 2a4304e7c..281f6fc1b 100644
--- 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
+
+ Tracing
+
@@ -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()(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
index 1c1d1a302..27a3c04e8 100644
--- 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};