Ui fixes (#789)

* Update scrollbars: Fixes #710, Fixes #726, Fixes #690

* Scroll for execute options: Fixes #774

* Fix inconsistency: Fixes #343

* Fix scrolling in hints: Fixes #595

* Fix tabs scroll: Fixes #776

Author: huv1k

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

@@ -269,6 +269,7 @@ const EditorWrapper = styled.div`
     white-space: nowrap;
   }
   .CodeMirror-linenumbers {
+    background: ${p => p.theme.editorColours.editorBackground};
   }
   .CodeMirror-linenumber {
     font-family: Open Sans, sans-serif;
@@ -347,12 +348,15 @@ const EditorWrapper = styled.div`
     height: 100%;
     /* 30px is the magic margin used to hide the element's real scrollbars */
     /* See overflow: hidden in .CodeMirror */
-    margin-bottom: -30px;
-    margin-right: -30px;
+    /* margin-bottom: -30px;
+    margin-right: -30px; */
     outline: none; /* Prevent dragging from highlighting the element */
-    overflow: scroll !important; /* Things will break if this is overridden */
-    padding-bottom: 30px;
+    overflow: hidden;
+    /* padding-bottom: 30px; */
     position: relative;
+    &:hover {
+      overflow: scroll !important; /* Things will break if this is overridden */
+    }
   }
   .CodeMirror-sizer {
     border-right: 30px solid transparent;
@@ -630,6 +634,7 @@ const EditorWrapper = styled.div`
   }
 
   .CodeMirror-jump-token {
+    cursor: pointer;
     text-decoration: underline;
   }
 `
@@ -638,6 +643,33 @@ const EditorWrapper = styled.div`
 // .CodeMirror-info info for types breaks stack trace
 // tslint:disable-next-line
 injectGlobal`
+  *::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 7px;
+    height: 7px;
+  }
+  *::-webkit-scrollbar-track-piece {
+    background-color: rgba(255, 255, 255, 0);
+  }
+  *::-webkit-scrollbar-track {
+    background-color: inherit;
+  }
+  *::-webkit-scrollbar-thumb {
+    max-height: 100px;
+    border-radius: 3px;
+    background-color: rgba(1, 1, 1, 0.23);
+  }
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(1, 1, 1, 0.35);
+  }
+  *::-webkit-scrollbar-thumb:active {
+    background-color: rgba(1, 1, 1, 0.48);
+  }
+  *::-webkit-scrollbar-corner {
+    background: rgba(0,0,0,0);
+  }
+
+
   .CodeMirror-lint-tooltip, .CodeMirror-info {
     background-color: white;
     border-radius: 4px 4px 4px 4px;
@@ -719,14 +751,16 @@ injectGlobal`
     margin-left: -6px;
     margin: 0;
     max-height: 20em;
-    overflow-y: auto;
     overflow: hidden;
     padding: 0;
     position: absolute;
     z-index: 10;
     border-radius: 2px;
     top: 0 !important;
     left: 0 !important;
+    &:hover {
+      overflow-y: overlay;
+    }
   }
 
   .CodeMirror-hints-wrapper {
@@ -742,7 +776,7 @@ injectGlobal`
     box-shadow: none;
     margin-left: 0;
     position: relative;
-    z-index: 0;
+    z-index: 0; 
   }
 
   .CodeMirror-hint {

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

@@ -59,18 +59,20 @@ class ExecuteButton extends React.Component<ReduxProps, State> {
     if (hasOptions && optionsOpen) {
       const highlight = this.state.highlight
       options = (
-        <ExecuteOptions>
-          {operations.map(operation => (
-            <ExecuteButtonOperation
-              operation={operation}
-              onMouseOver={this.handleMouseOver}
-              onMouseOut={this.handleMouseOut}
-              onMouseUp={this.handleMouseUp}
-              highlight={highlight}
-              key={operation.name ? operation.name.value : '*'}
-            />
-          ))}
-        </ExecuteOptions>
+        <ExecuteBox>
+          <ExecuteOptions>
+            {operations.map(operation => (
+              <ExecuteButtonOperation
+                operation={operation}
+                onMouseOver={this.handleMouseOver}
+                onMouseOut={this.handleMouseOut}
+                onMouseUp={this.handleMouseUp}
+                highlight={highlight}
+                key={operation.name ? operation.name.value : '*'}
+              />
+            ))}
+          </ExecuteOptions>
+        </ExecuteBox>
       )
     }
 
@@ -231,12 +233,12 @@ const Button = withProps<ButtonProps>()(styled.div)`
   }
 `
 
-const ExecuteOptions = styled.ul`
+const ExecuteBox = styled.div`
   background: #fff;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.25);
+  padding: 8px 0;
   left: -1px;
   margin: 0;
-  padding: 8px 0;
   position: absolute;
   top: 78px;
   z-index: 100;
@@ -251,6 +253,11 @@ const ExecuteOptions = styled.ul`
     width: 8px;
     height: 8px;
   }
+`
+
+const ExecuteOptions = styled.ul`
+  max-height: 270px;
+  overflow: scroll;
 
   li {
     cursor: pointer;

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,12 @@ 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};
+  }
 `
 
 const VariableEditorTitle = withProps<TitleProps>()(styled(BottomDrawerTitle))`
@@ -718,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)`

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

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

@@ -148,6 +148,7 @@ interface TabItemProps {
 }
 
 const TabItem = withProps<TabItemProps>()(styled.div)`
+  flex: 0 0 auto;
   display: flex;
   align-items: center;
   height: 43px;

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

@@ -59,7 +59,11 @@ const StyledTabBar = styled.div`
   color: white;
   height: 57px;
   background: ${p => p.theme.editorColours.background};
+  overflow: hidden;
   -webkit-app-region: drag;
+  &:hover {
+    overflow-x: overlay;
+  }
 `
 
 interface TabsProps {