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};