Fix scrolling of query items and JSON details view

Summary: This diff fixes the tripple scrollbars in the graphQL plugin, and makes sure scrollbars for the detail panel are properly shown

Reviewed By: jonathoma

Differential Revision: D21177849

fbshipit-source-id: d40173d7e9a45064b608c8d953c7aea47a4acd0f

desktop/app/src/PluginContainer.tsx

@@ -55,7 +55,7 @@ const Container = styled(FlexColumn)({
 export const SidebarContainer = styled(FlexRow)({
   backgroundColor: colors.light02,
   height: '100%',
-  overflow: 'scroll',
+  overflow: 'auto',
 });
 
 const Waiting = styled(FlexColumn)({

desktop/app/src/ui/components/Panel.tsx

@@ -121,7 +121,7 @@ export default class Panel extends React.Component<
       borderTop: 'none',
       flexGrow: 1,
       padding: props.padded ? 10 : 0,
-      overflow: 'visible',
+      overflow: 'hidden',
     }),
   );
   state = {

desktop/app/src/ui/components/Sidebar.tsx

@@ -181,9 +181,7 @@ export default class Sidebar extends Component<SidebarProps, SidebarState> {
         width={horizontal ? (onResize ? width : this.state.width) : undefined}
         minHeight={minHeight}
         maxHeight={maxHeight}
-        height={
-          !horizontal ? (onResize ? height : this.state.height) : undefined
-        }
+        height={!horizontal ? (onResize ? height : this.state.height) : '100%'}
         resizable={resizable}
         onResize={this.onResize}>
         <SidebarContainer position={position} backgroundColor={backgroundColor}>

desktop/app/src/ui/components/searchable/Searchable.tsx

@@ -22,6 +22,7 @@ import styled from '@emotion/styled';
 import debounce from 'lodash.debounce';
 import ToggleButton from '../ToggleSwitch';
 import React from 'react';
+import VerticalContainer from '../Layout';
 
 const SearchBar = styled(Toolbar)({
   height: 42,
@@ -464,7 +465,8 @@ const Searchable = (
 
     render() {
       const {placeholder, actions, ...props} = this.props;
-      return [
+      return (
+        <VerticalContainer scrollable>
           <SearchBar position="top" key="searchbar">
             <SearchBox tabIndex={-1}>
               <SearchIcon
@@ -496,7 +498,9 @@ const Searchable = (
                     ? this.state.compiledRegex !== null
                     : true
                 }
-              regex={Boolean(this.state.regexEnabled && this.state.searchTerm)}
+                regex={Boolean(
+                  this.state.regexEnabled && this.state.searchTerm,
+                )}
               />
               {(this.state.searchTerm || this.state.filters.length > 0) && (
                 <Clear onClick={this.clear}>&times;</Clear>
@@ -520,7 +524,7 @@ const Searchable = (
               />
             ) : null}
             {actions != null && <Actions>{actions}</Actions>}
-        </SearchBar>,
+          </SearchBar>
           <Component
             {...props}
             key="table"
@@ -529,8 +533,9 @@ const Searchable = (
             regexEnabled={this.state.regexEnabled}
             bodySearchEnabled={this.state.bodySearchEnabled}
             filters={this.state.filters}
-        />,
-      ];
+          />
+        </VerticalContainer>
+      );
     }
   };