diff --git a/superset-frontend/src/components/Menu/SubMenu.tsx b/superset-frontend/src/components/Menu/SubMenu.tsx index ec03222fc2..83ed92b4aa 100644 --- a/superset-frontend/src/components/Menu/SubMenu.tsx +++ b/superset-frontend/src/components/Menu/SubMenu.tsx @@ -21,7 +21,7 @@ import { Link, useHistory } from 'react-router-dom'; import { styled } from '@superset-ui/core'; import cx from 'classnames'; import { debounce } from 'lodash'; -import { Col, Row } from 'antd'; +import { Row } from 'antd'; import { Menu, MenuMode } from 'src/common/components'; import Button, { OnClickHandler } from 'src/components/Button'; @@ -42,6 +42,8 @@ const StyledHeader = styled.div` padding: 14px 0; margin-right: ${({ theme }) => theme.gridUnit * 3}px; float: right; + position: absolute; + right: 0; } .nav-right-collapse { display: flex; @@ -111,8 +113,8 @@ const StyledHeader = styled.div` @media (max-width: 767px) { .header, .nav-right { - float: left; - padding-left: ${({ theme }) => theme.gridUnit * 2}px; + position: relative; + margin-left: ${({ theme }) => theme.gridUnit * 2}px; } } `; @@ -150,13 +152,11 @@ export interface SubMenuProps { * otherwise, a 'You should not use outside a ' error will be thrown */ usesRouter?: boolean; color?: string; - headerSize?: number; } const SubMenuComponent: React.FunctionComponent = props => { const [showMenu, setMenu] = useState('horizontal'); const [navRightStyle, setNavRightStyle] = useState('nav-right'); - const [navRightCol, setNavRightCol] = useState(8); let hasHistory = true; // If no parent component exists, useHistory throws an error @@ -177,14 +177,12 @@ const SubMenuComponent: React.FunctionComponent = props => { props.buttons.length >= 3 && window.innerWidth >= 795 ) { - setNavRightCol(8); setNavRightStyle('nav-right'); } else if ( props.buttons && props.buttons.length >= 3 && window.innerWidth <= 795 ) { - setNavRightCol(24); setNavRightStyle('nav-right-collapse'); } } @@ -197,64 +195,53 @@ const SubMenuComponent: React.FunctionComponent = props => { return ( - {props.name && ( - - {props.name} - - )} - - - {props.tabs && - props.tabs.map(tab => { - if ((props.usesRouter || hasHistory) && !!tab.usesRouter) { - return ( - - - - {tab.label} - - - - ); - } + {props.name && {props.name}} + + {props.tabs?.map(tab => { + if ((props.usesRouter || hasHistory) && !!tab.usesRouter) { + return ( + + + + {tab.label} + + + + ); + } - return ( - - - - {tab.label} - - - - ); - })} - - - - - {props.buttons?.map((btn, i) => ( - - {btn.name} - - ))} - - + return ( + + + + {tab.label} + + + + ); + })} + + + {props.buttons?.map((btn, i) => ( + + {btn.name} + + ))} + {props.children} diff --git a/superset-frontend/src/views/CRUD/annotationlayers/AnnotationLayersList.tsx b/superset-frontend/src/views/CRUD/annotationlayers/AnnotationLayersList.tsx index f3dc3a873d..55f7da5a4c 100644 --- a/superset-frontend/src/views/CRUD/annotationlayers/AnnotationLayersList.tsx +++ b/superset-frontend/src/views/CRUD/annotationlayers/AnnotationLayersList.tsx @@ -344,11 +344,7 @@ function AnnotationLayersList({ return ( <> - + - +