message: fix(dashboard): Fix dashboard's left side being cut off
diff: @@ -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<DashboardBuilderProps> = () => {
  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<DashboardBuilderProps> = () => {
  dashboardFiltersOpen={dashboardFiltersOpen}
  editMode={editMode}
  nativeFiltersEnabled={nativeFiltersEnabled}
  + filterBarOrientation={filterBarOrientation}
  >
  {showDashboard ? (
  <DashboardContainer topLevelTabs={topLevelTabs} />
  