From 67412bfb436b7ef62dd08371122c6f93386d0abd Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Thu, 23 Apr 2020 03:45:43 -0700
Subject: [PATCH] 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           |   2 +-
 desktop/app/src/ui/components/Panel.tsx       |   2 +-
 desktop/app/src/ui/components/Sidebar.tsx     |   4 +-
 .../ui/components/searchable/Searchable.tsx   | 137 +++++++++---------
 4 files changed, 74 insertions(+), 71 deletions(-)

diff --git a/desktop/app/src/PluginContainer.tsx b/desktop/app/src/PluginContainer.tsx
index 4bbd87d65..4bdf90805 100644
--- a/desktop/app/src/PluginContainer.tsx
+++ b/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)({
diff --git a/desktop/app/src/ui/components/Panel.tsx b/desktop/app/src/ui/components/Panel.tsx
index 6609ec158..c267cf87f 100644
--- a/desktop/app/src/ui/components/Panel.tsx
+++ b/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 = {
diff --git a/desktop/app/src/ui/components/Sidebar.tsx b/desktop/app/src/ui/components/Sidebar.tsx
index 5859fdec4..2c0422955 100644
--- a/desktop/app/src/ui/components/Sidebar.tsx
+++ b/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}>
diff --git a/desktop/app/src/ui/components/searchable/Searchable.tsx b/desktop/app/src/ui/components/searchable/Searchable.tsx
index afa2d8db0..cd98f6f39 100644
--- a/desktop/app/src/ui/components/searchable/Searchable.tsx
+++ b/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,73 +465,77 @@ const Searchable = (
 
     render() {
       const {placeholder, actions, ...props} = this.props;
-      return [
-        <SearchBar position="top" key="searchbar">
-          <SearchBox tabIndex={-1}>
-            <SearchIcon
-              name="magnifying-glass"
-              color={colors.macOSTitleBarIcon}
-              size={16}
-            />
-            {this.state.filters.map((filter, i) => (
-              <FilterToken
-                key={`${filter.key}:${filter.type}`}
-                index={i}
-                filter={filter}
-                focused={i === this.state.focusedToken}
-                onFocus={this.onTokenFocus}
-                onDelete={this.removeFilter}
-                onReplace={this.replaceFilter}
-                onBlur={this.onTokenBlur}
+      return (
+        <VerticalContainer scrollable>
+          <SearchBar position="top" key="searchbar">
+            <SearchBox tabIndex={-1}>
+              <SearchIcon
+                name="magnifying-glass"
+                color={colors.macOSTitleBarIcon}
+                size={16}
               />
-            ))}
-            <SearchInput
-              placeholder={placeholder}
-              onChange={this.onChangeSearchTerm}
-              value={this.state.searchTerm}
-              ref={this.setInputRef}
-              onFocus={this.onInputFocus}
-              onBlur={this.onInputBlur}
-              isValidInput={
-                this.state.regexEnabled
-                  ? this.state.compiledRegex !== null
-                  : true
-              }
-              regex={Boolean(this.state.regexEnabled && this.state.searchTerm)}
-            />
-            {(this.state.searchTerm || this.state.filters.length > 0) && (
-              <Clear onClick={this.clear}>&times;</Clear>
-            )}
-          </SearchBox>
-          {this.props.allowRegexSearch ? (
-            <ToggleButton
-              toggled={this.state.regexEnabled}
-              onClick={this.onRegexToggled}
-              label={'Regex'}
-            />
-          ) : null}
-          {this.props.allowBodySearch ? (
-            <ToggleButton
-              toggled={this.state.bodySearchEnabled}
-              onClick={this.onBodySearchToggled}
-              label={'Body'}
-              tooltip={
-                'Search request and response bodies (warning: this can be quite slow)'
-              }
-            />
-          ) : null}
-          {actions != null && <Actions>{actions}</Actions>}
-        </SearchBar>,
-        <Component
-          {...props}
-          key="table"
-          addFilter={this.addFilter}
-          searchTerm={this.state.searchTerm}
-          regexEnabled={this.state.regexEnabled}
-          bodySearchEnabled={this.state.bodySearchEnabled}
-          filters={this.state.filters}
-        />,
-      ];
+              {this.state.filters.map((filter, i) => (
+                <FilterToken
+                  key={`${filter.key}:${filter.type}`}
+                  index={i}
+                  filter={filter}
+                  focused={i === this.state.focusedToken}
+                  onFocus={this.onTokenFocus}
+                  onDelete={this.removeFilter}
+                  onReplace={this.replaceFilter}
+                  onBlur={this.onTokenBlur}
+                />
+              ))}
+              <SearchInput
+                placeholder={placeholder}
+                onChange={this.onChangeSearchTerm}
+                value={this.state.searchTerm}
+                ref={this.setInputRef}
+                onFocus={this.onInputFocus}
+                onBlur={this.onInputBlur}
+                isValidInput={
+                  this.state.regexEnabled
+                    ? this.state.compiledRegex !== null
+                    : true
+                }
+                regex={Boolean(
+                  this.state.regexEnabled && this.state.searchTerm,
+                )}
+              />
+              {(this.state.searchTerm || this.state.filters.length > 0) && (
+                <Clear onClick={this.clear}>&times;</Clear>
+              )}
+            </SearchBox>
+            {this.props.allowRegexSearch ? (
+              <ToggleButton
+                toggled={this.state.regexEnabled}
+                onClick={this.onRegexToggled}
+                label={'Regex'}
+              />
+            ) : null}
+            {this.props.allowBodySearch ? (
+              <ToggleButton
+                toggled={this.state.bodySearchEnabled}
+                onClick={this.onBodySearchToggled}
+                label={'Body'}
+                tooltip={
+                  'Search request and response bodies (warning: this can be quite slow)'
+                }
+              />
+            ) : null}
+            {actions != null && <Actions>{actions}</Actions>}
+          </SearchBar>
+          <Component
+            {...props}
+            key="table"
+            addFilter={this.addFilter}
+            searchTerm={this.state.searchTerm}
+            regexEnabled={this.state.regexEnabled}
+            bodySearchEnabled={this.state.bodySearchEnabled}
+            filters={this.state.filters}
+          />
+        </VerticalContainer>
+      );
     }
   };