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/components/Select/styles.tsx

@@ -161,10 +161,8 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
   ) => {
     const isPseudoFocused = isFocused && !menuIsOpen;
     let borderColor = colors.grayBorder;
-    if (isPseudoFocused) {
+    if (isPseudoFocused || menuIsOpen) {
       borderColor = colors.grayBorderDark;
-    } else if (menuIsOpen) {
-      borderColor = `${colors.grayBorderDark} ${colors.grayBorder} ${colors.grayBorderLight}`;
     }
     return [
       provider,
@@ -185,22 +183,28 @@ export const DEFAULT_STYLES: PartialStylesConfig = {
       `,
     ];
   },
-  menu: (provider, { theme: { borderRadius, zIndex, colors } }) => [
+  menu: (provider, { theme: { zIndex } }) => [
+    provider,
+    css`
+      padding-bottom: 2em;
+      z-index: ${zIndex}; /* override at least multi-page pagination */
+      width: auto;
+      min-width: 100%;
+      max-width: 80vw;
+      box-shadow: none;
+      border: 0;
+    `,
+  ],
+  menuList: (provider, { theme: { borderRadius, colors } }) => [
     provider,
     css`
       border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
-      border: 1px solid #ccc;
+      border: 1px solid ${colors.grayBorderDark};
       box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
       margin-top: -1px;
       border-top-color: ${colors.grayBorderLight};
       min-width: 100%;
       width: auto;
-      z-index: ${zIndex}; /* override at least multi-page pagination */
-    `,
-  ],
-  menuList: (provider, { theme: { borderRadius } }) => [
-    provider,
-    css`
       border-radius: 0 0 ${borderRadius}px ${borderRadius}px;
       padding-top: 0;
       padding-bottom: 0;

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