diff --git a/superset-frontend/src/components/Select/styles.tsx b/superset-frontend/src/components/Select/styles.tsx index 9358021810010..c9904169b72c9 100644 --- a/superset-frontend/src/components/Select/styles.tsx +++ b/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; diff --git a/superset-frontend/src/explore/components/ControlPanelsContainer.jsx b/superset-frontend/src/explore/components/ControlPanelsContainer.jsx index 70c347cffd00b..a534438b0aeed 100644 --- a/superset-frontend/src/explore/components/ControlPanelsContainer.jsx +++ b/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 { diff --git a/superset-frontend/src/explore/components/DataTablesPane.tsx b/superset-frontend/src/explore/components/DataTablesPane.tsx index 11536dca7537b..f4a7b1bf5a66f 100644 --- a/superset-frontend/src/explore/components/DataTablesPane.tsx +++ b/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 }>` diff --git a/superset-frontend/src/explore/components/ExploreChartPanel.jsx b/superset-frontend/src/explore/components/ExploreChartPanel.jsx index f0ea90694a6e4..e89dc586038f4 100644 --- a/superset-frontend/src/explore/components/ExploreChartPanel.jsx +++ b/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 ( - +
{header}
diff --git a/superset-frontend/src/explore/components/ExploreViewContainer.jsx b/superset-frontend/src/explore/components/ExploreViewContainer.jsx index 1a701df8e180a..e02a4ed14dee3 100644 --- a/superset-frontend/src/explore/components/ExploreViewContainer.jsx +++ b/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) { /> )} ) : null}