diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx index 4a318a42abd4..d2ce6a2f1a3e 100644 --- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx +++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx @@ -22,11 +22,11 @@ import React, { FC, useCallback, useEffect, - useState, useMemo, useRef, + useState, } from 'react'; -import { JsonObject, styled, css, t } from '@superset-ui/core'; +import { css, JsonObject, styled, t } from '@superset-ui/core'; import { Global } from '@emotion/react'; import { useDispatch, useSelector } from 'react-redux'; import ErrorBoundary from 'src/components/ErrorBoundary'; @@ -57,8 +57,8 @@ import { } from 'src/dashboard/actions/dashboardLayout'; import { DASHBOARD_GRID_ID, - DASHBOARD_ROOT_ID, DASHBOARD_ROOT_DEPTH, + DASHBOARD_ROOT_ID, DashboardStandaloneMode, } from 'src/dashboard/util/constants'; import FilterBar from 'src/dashboard/components/nativeFilters/FilterBar'; @@ -72,10 +72,10 @@ import { FILTER_BAR_HEADER_HEIGHT, FILTER_BAR_TABS_HEIGHT, MAIN_HEADER_HEIGHT, - OPEN_FILTER_BAR_WIDTH, OPEN_FILTER_BAR_MAX_WIDTH, + OPEN_FILTER_BAR_WIDTH, } from 'src/dashboard/constants'; -import { shouldFocusTabs, getRootLevelTabsComponent } from './utils'; +import { getRootLevelTabsComponent, shouldFocusTabs } from './utils'; import DashboardContainer from './DashboardContainer'; import { useNativeFilters } from './state'; @@ -168,6 +168,7 @@ const StyledDashboardContent = styled.div<{ dashboardFiltersOpen: boolean; editMode: boolean; nativeFiltersEnabled: boolean; + filterBarOrientation: FilterBarOrientation; }>` display: flex; flex-direction: row; @@ -193,8 +194,14 @@ const StyledDashboardContent = styled.div<{ dashboardFiltersOpen, editMode, nativeFiltersEnabled, + filterBarOrientation, }) => { - if (!dashboardFiltersOpen && !editMode && nativeFiltersEnabled) { + if ( + !dashboardFiltersOpen && + !editMode && + nativeFiltersEnabled && + filterBarOrientation !== FilterBarOrientation.HORIZONTAL + ) { return 0; } return theme.gridUnit * 8; @@ -335,9 +342,19 @@ const DashboardBuilder: FC = () => { const draggableStyle = useMemo( () => ({ marginLeft: - dashboardFiltersOpen || editMode || !nativeFiltersEnabled ? 0 : -32, + dashboardFiltersOpen || + editMode || + !nativeFiltersEnabled || + filterBarOrientation === FilterBarOrientation.HORIZONTAL + ? 0 + : -32, }), - [dashboardFiltersOpen, editMode, nativeFiltersEnabled], + [ + dashboardFiltersOpen, + editMode, + filterBarOrientation, + nativeFiltersEnabled, + ], ); // If a new tab was added, update the directPathToChild to reflect it @@ -505,6 +522,7 @@ const DashboardBuilder: FC = () => { dashboardFiltersOpen={dashboardFiltersOpen} editMode={editMode} nativeFiltersEnabled={nativeFiltersEnabled} + filterBarOrientation={filterBarOrientation} > {showDashboard ? (