diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index 807fe46b75de..ba18e537e375 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -55,6 +55,7 @@ import DashboardContainer from './DashboardContainer';
 
 const TABS_HEIGHT = 47;
 const HEADER_HEIGHT = 67;
+const NATIVE_FILTER_BAR_WIDTH = 255;
 
 type DashboardBuilderProps = {};
 
@@ -161,6 +162,11 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
     (hideDashboardHeader ? 0 : HEADER_HEIGHT) +
     (topLevelTabs ? TABS_HEIGHT : 0);
 
+  const tabsPaddingLeft =
+    nativeFiltersEnabled && !editMode && dashboardFiltersOpen
+      ? NATIVE_FILTER_BAR_WIDTH + 20
+      : 8;
+
   useEffect(() => {
     if (
       filterValues.length === 0 &&
@@ -219,6 +225,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
                       renderTabContent={false}
                       renderHoverMenu={false}
                       onChangeTab={handleChangeTab}
+                      paddingLeft={tabsPaddingLeft}
                     />
                   </WithPopoverMenu>
                 )}
@@ -235,9 +242,11 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
           <StickyVerticalBar
             filtersOpen={dashboardFiltersOpen}
             topOffset={barTopOffset}
+            openWidth={NATIVE_FILTER_BAR_WIDTH}
           >
             <ErrorBoundary>
               <FilterBar
+                width={NATIVE_FILTER_BAR_WIDTH}
                 filtersOpen={dashboardFiltersOpen}
                 toggleFiltersBar={toggleDashboardFiltersOpen}
                 directPathToChild={directPathToChild}
diff --git a/superset-frontend/src/dashboard/components/StickyVerticalBar.tsx b/superset-frontend/src/dashboard/components/StickyVerticalBar.tsx
index 80e76282e366..dd6f9662deac 100644
--- a/superset-frontend/src/dashboard/components/StickyVerticalBar.tsx
+++ b/superset-frontend/src/dashboard/components/StickyVerticalBar.tsx
@@ -22,7 +22,7 @@ import { StickyContainer, Sticky } from 'react-sticky';
 import { styled } from '@superset-ui/core';
 import cx from 'classnames';
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ openWidth: number }>`
   position: relative;
   width: ${({ theme }) => theme.gridUnit * 8}px;
   flex: 0 0 ${({ theme }) => theme.gridUnit * 8}px;
@@ -33,7 +33,7 @@ const Wrapper = styled.div`
     transition-delay: ${({ theme }) => theme.transitionTiming * 2}s;
   } */
   &.open {
-    width: 250px;
+    width: ${({ openWidth }) => openWidth}px;
     flex: 0 0 250px;
     /* &.animated {
       transition-delay: 0s;
@@ -50,7 +50,7 @@ const Contents = styled.div`
 
 export interface SVBProps {
   topOffset: number;
-  width?: number;
+  openWidth: number;
   filtersOpen: boolean;
 }
 
@@ -65,8 +65,9 @@ export const StickyVerticalBar: React.FC<SVBProps> = ({
   topOffset,
   children,
   filtersOpen,
+  openWidth,
 }) => (
-  <Wrapper className={cx({ open: filtersOpen })}>
+  <Wrapper className={cx({ open: filtersOpen })} openWidth={openWidth}>
     <StickyContainer>
       <Sticky topOffset={-topOffset} bottomOffset={Infinity}>
         {({
@@ -79,6 +80,7 @@ export const StickyVerticalBar: React.FC<SVBProps> = ({
           distanceFromTop: number;
         }) => (
           <Contents
+            id="sticky-vertical-bar"
             style={
               isSticky
                 ? {
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
index c41abf83a4b0..c6e41342c5d5 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -50,6 +50,7 @@ const propTypes = {
   editMode: PropTypes.bool.isRequired,
   renderHoverMenu: PropTypes.bool,
   directPathToChild: PropTypes.arrayOf(PropTypes.string),
+  paddingLeft: PropTypes.number,
 
   // actions (from DashboardComponent.jsx)
   logEvent: PropTypes.func.isRequired,
@@ -78,12 +79,17 @@ const defaultProps = {
   onResizeStart() {},
   onResize() {},
   onResizeStop() {},
+  paddingLeft: 8,
 };
 
 const StyledTabsContainer = styled.div`
   width: 100%;
   background-color: ${({ theme }) => theme.colors.grayscale.light5};
 
+  &.dashboard-component.dashboard-component-tabs {
+    padding-left: ${({ paddingLeft }) => paddingLeft}px;
+  }
+
   .dashboard-component-tabs-content {
     min-height: ${({ theme }) => theme.gridUnit * 12}px;
     margin-top: ${({ theme }) => theme.gridUnit / 4}px;
@@ -276,6 +282,7 @@ class Tabs extends React.PureComponent {
       dashboardLayout,
       lastFocusedTabId,
       setLastFocusedTab,
+      paddingLeft,
     } = this.props;
 
     const { children: tabIds } = tabsComponent;
@@ -311,6 +318,7 @@ class Tabs extends React.PureComponent {
           <StyledTabsContainer
             className="dashboard-component dashboard-component-tabs"
             data-test="dashboard-component-tabs"
+            paddingLeft={paddingLeft}
           >
             {editMode && renderHoverMenu && (
               <HoverMenu innerRef={tabsDragSourceRef} position="left">
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
index d666c975fa5e..30f766e5b049 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterBar.test.tsx
@@ -208,7 +208,7 @@ describe('FilterBar', () => {
   const renderWrapper = (props = closedBarProps, state?: object) =>
     render(
       <Provider store={state ? getMockStore(state) : mockStore}>
-        <FilterBar {...props} />
+        <FilterBar {...props} width={250} />
       </Provider>,
     );
 
diff --git a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
index 44a4f82aed72..abfaf51b57a4 100644
--- a/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
+++ b/superset-frontend/src/dashboard/components/nativeFilters/FilterBar/index.tsx
@@ -50,22 +50,20 @@ import EditSection from './FilterSets/EditSection';
 import Header from './Header';
 import FilterControls from './FilterControls/FilterControls';
 
-const BAR_WIDTH = `250px`;
-
 export const FILTER_BAR_TEST_ID = 'filter-bar';
 export const getFilterBarTestId = testWithId(FILTER_BAR_TEST_ID);
 
-const BarWrapper = styled.div`
+const BarWrapper = styled.div<{ width: number }>`
   width: ${({ theme }) => theme.gridUnit * 8}px;
   & .ant-tabs-top > .ant-tabs-nav {
     margin: 0;
   }
   &.open {
-    width: ${BAR_WIDTH}; // arbitrary...
+    min-width: ${({ width }) => width}px; // arbitrary...
   }
 `;
 
-const Bar = styled.div`
+const Bar = styled.div<{ width: number }>`
   & .ant-typography-edit-content {
     left: 0;
     margin-top: 0;
@@ -76,7 +74,7 @@ const Bar = styled.div`
   left: 0;
   flex-direction: column;
   flex-grow: 1;
-  width: ${BAR_WIDTH}; // arbitrary...
+  min-width: ${({ width }) => width}px; // arbitrary...
   background: ${({ theme }) => theme.colors.grayscale.light5};
   border-right: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
   min-height: 100%;
@@ -149,12 +147,14 @@ const StyledTabs = styled(Tabs)`
 `;
 
 export interface FiltersBarProps {
+  width: number;
   filtersOpen: boolean;
   toggleFiltersBar: any;
   directPathToChild?: string[];
 }
 
 const FilterBar: React.FC<FiltersBarProps> = ({
+  width,
   filtersOpen,
   toggleFiltersBar,
   directPathToChild,
@@ -212,7 +212,11 @@ const FilterBar: React.FC<FiltersBarProps> = ({
   const isInitialized = useInitialization();
 
   return (
-    <BarWrapper {...getFilterBarTestId()} className={cx({ open: filtersOpen })}>
+    <BarWrapper
+      {...getFilterBarTestId()}
+      className={cx({ open: filtersOpen })}
+      width={width}
+    >
       <CollapsedBar
         {...getFilterBarTestId('collapsable')}
         className={cx({ open: !filtersOpen })}
@@ -224,7 +228,7 @@ const FilterBar: React.FC<FiltersBarProps> = ({
         />
         <Icon name="filter" {...getFilterBarTestId('filter-icon')} />
       </CollapsedBar>
-      <Bar className={cx({ open: filtersOpen })}>
+      <Bar className={cx({ open: filtersOpen })} width={width}>
         <Header
           toggleFiltersBar={toggleFiltersBar}
           onApply={handleApply}
diff --git a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
index 387e67c92629..c6b9fd203a6c 100644
--- a/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
+++ b/superset-frontend/src/dashboard/containers/DashboardComponent.jsx
@@ -59,6 +59,7 @@ const propTypes = {
   directPathLastUpdated: PropTypes.number,
   dashboardId: PropTypes.number.isRequired,
   isComponentVisible: PropTypes.bool,
+  paddingLeft: PropTypes.number,
 };
 
 const defaultProps = {