Scroll for execute options: Fixes #774

graphql · Jul 14, 2018 · 27a033a · 27a033a
1 parent a0ae25a
commit 27a033a
Showing 1 changed file with 21 additions and 14 deletions.
diff --git a/packages/graphql-playground-react/src/components/Playground/ExecuteButton.tsx b/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;