fix: explore page style fix, remove unnecessary scroll bars (#12649)

* fix: various style touch on Explore page

* More style fixes

* Force 100% height for sidebars

* Fix linting

superset-frontend/src/explore/components/ControlPanelsContainer.jsx

@@ -22,7 +22,6 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Alert } from 'react-bootstrap';
-import { css } from '@emotion/core';
 import { t, styled, getChartControlPanelRegistry } from '@superset-ui/core';
 
 import Tabs from 'src/common/components/Tabs';
@@ -46,16 +45,16 @@ const propTypes = {
 
 const Styles = styled.div`
   height: 100%;
-  max-height: 100%;
+  width: 100%;
   overflow: auto;
+  overflow-x: visible;
+  overflow-y: auto;
   .remove-alert {
     cursor: pointer;
   }
   #controlSections {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    max-height: 100%;
+    min-height: 100%;
+    overflow: visible;
   }
   .nav-tabs {
     flex: 0 0 1;
@@ -64,15 +63,18 @@ const Styles = styled.div`
     overflow: auto;
     flex: 1 1 100%;
   }
+  .Select__menu {
+    max-width: 100%;
+  }
 `;
 
 const ControlPanelsTabs = styled(Tabs)`
-  ${({ fullWidth }) =>
-    css`
-      .ant-tabs-nav-list {
-        width: ${fullWidth ? '100%' : '50%'};
-      }
-    `}
+  .ant-tabs-nav-list {
+    width: ${({ fullWidth }) => (fullWidth ? '100%' : '50%')};
+  }
+  .ant-tabs-content-holder {
+    overflow: visible;
+  }
 `;
 
 class ControlPanelsContainer extends React.Component {

superset-frontend/src/explore/components/DataTablesPane.tsx

@@ -57,6 +57,7 @@ const SouthPane = styled.div`
   position: relative;
   background-color: ${({ theme }) => theme.colors.grayscale.light5};
   z-index: 5;
+  overflow: hidden;
 `;
 
 const TabsWrapper = styled.div<{ contentHeight: number }>`

superset-frontend/src/explore/components/ExploreChartPanel.jsx

@@ -66,6 +66,8 @@ const Styles = styled.div`
   align-items: stretch;
   align-content: stretch;
   overflow: auto;
+  box-shadow: none;
+  height: 100%;
 
   & > div:last-of-type {
     flex-basis: 100%;
@@ -240,10 +242,7 @@ const ExploreChartPanel = props => {
   });
 
   return (
-    <Styles
-      className="panel panel-default chart-container"
-      style={{ height: props.height }}
-    >
+    <Styles className="panel panel-default chart-container">
       <div className="panel-heading" ref={headerRef}>
         {header}
       </div>

superset-frontend/src/explore/components/ExploreViewContainer.jsx

@@ -95,6 +95,9 @@ const Styles = styled.div`
     flex: 1;
     min-width: ${({ theme }) => theme.gridUnit * 128}px;
     border-left: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
+    .panel {
+      margin-bottom: 0;
+    }
   }
   .controls-column {
     align-self: flex-start;
@@ -404,7 +407,7 @@ function ExploreViewContainer(props) {
         />
       )}
       <Resizable
-        defaultSize={{ width: 300 }}
+        defaultSize={{ width: 300, height: '100%' }}
         minWidth={300}
         maxWidth="33%"
         enable={{ right: true }}
@@ -456,7 +459,7 @@ function ExploreViewContainer(props) {
         </div>
       ) : null}
       <Resizable
-        defaultSize={{ width: 320 }}
+        defaultSize={{ width: 320, height: '100%' }}
         minWidth={320}
         maxWidth="33%"
         enable={{ right: true }}