fix: fix tabs overflow in dashboards

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.test.tsx

@@ -275,6 +275,85 @@ describe('DashboardBuilder', () => {
     expect(filterbar).toHaveStyleRule('width', `${expectedValue}px`);
   });
 
+  test('should set header max width based on open filter bar width', () => {
+    const expectedValue = 320;
+    const setter = jest.fn();
+    (useStoredSidebarWidth as jest.Mock).mockImplementation(() => [
+      expectedValue,
+      setter,
+    ]);
+    const nativeFiltersSpy = jest
+      .spyOn(useNativeFiltersModule, 'useNativeFilters')
+      .mockReturnValue({
+        showDashboard: true,
+        missingInitialFilters: [],
+        dashboardFiltersOpen: true,
+        toggleDashboardFiltersOpen: jest.fn(),
+        nativeFiltersEnabled: true,
+      });
+
+    const { getByTestId } = setup();
+
+    expect(getByTestId('dashboard-header-wrapper')).toHaveStyleRule(
+      'max-width',
+      `calc(100vw - ${expectedValue}px)`,
+    );
+
+    nativeFiltersSpy.mockRestore();
+  });
+
+  test('should use closed filter bar width when the panel is collapsed', () => {
+    const setter = jest.fn();
+    (useStoredSidebarWidth as jest.Mock).mockImplementation(() => [
+      OPEN_FILTER_BAR_WIDTH,
+      setter,
+    ]);
+    const nativeFiltersSpy = jest
+      .spyOn(useNativeFiltersModule, 'useNativeFilters')
+      .mockReturnValue({
+        showDashboard: true,
+        missingInitialFilters: [],
+        dashboardFiltersOpen: false,
+        toggleDashboardFiltersOpen: jest.fn(),
+        nativeFiltersEnabled: true,
+      });
+
+    const { getByTestId } = setup();
+
+    expect(getByTestId('dashboard-header-wrapper')).toHaveStyleRule(
+      'max-width',
+      `calc(100vw - ${CLOSED_FILTER_BAR_WIDTH}px)`,
+    );
+
+    nativeFiltersSpy.mockRestore();
+  });
+
+  test('should not constrain header width when filter bar is hidden', () => {
+    const setter = jest.fn();
+    (useStoredSidebarWidth as jest.Mock).mockImplementation(() => [
+      OPEN_FILTER_BAR_WIDTH,
+      setter,
+    ]);
+    const nativeFiltersSpy = jest
+      .spyOn(useNativeFiltersModule, 'useNativeFilters')
+      .mockReturnValue({
+        showDashboard: true,
+        missingInitialFilters: [],
+        dashboardFiltersOpen: true,
+        toggleDashboardFiltersOpen: jest.fn(),
+        nativeFiltersEnabled: false,
+      });
+
+    const { getByTestId } = setup();
+
+    expect(getByTestId('dashboard-header-wrapper')).toHaveStyleRule(
+      'max-width',
+      'calc(100vw - 0px)',
+    );
+
+    nativeFiltersSpy.mockRestore();
+  });
+
   test('filter panel state when featureflag is true', () => {
     window.featureFlags = {
       [FeatureFlag.FilterBarClosedByDefault]: true,

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -96,14 +96,14 @@ const StickyPanel = styled.div<{ width: number }>`
 `;
 
 // @z-index-above-dashboard-popovers (99) + 1 = 100
-const StyledHeader = styled.div`
-  ${({ theme }) => css`
+const StyledHeader = styled.div<{ filterBarWidth: number }>`
+  ${({ theme, filterBarWidth }) => css`
     grid-column: 2;
     grid-row: 1;
     position: sticky;
     top: 0;
     z-index: 99;
-    max-width: 100vw;
+    max-width: calc(100vw - ${filterBarWidth}px);
 
     .empty-droptarget:before {
       position: absolute;
@@ -426,6 +426,9 @@ const DashboardBuilder = () => {
     isReport;
 
   const [barTopOffset, setBarTopOffset] = useState(0);
+  const [currentFilterBarWidth, setCurrentFilterBarWidth] = useState(
+    CLOSED_FILTER_BAR_WIDTH,
+  );
 
   useEffect(() => {
     setBarTopOffset(headerRef.current?.getBoundingClientRect()?.height || 0);
@@ -523,6 +526,7 @@ const DashboardBuilder = () => {
             shouldFocus={shouldFocusTabs}
             menuItems={[
               <IconButton
+                key="collapse-tabs"
                 icon={<Icons.FallOutlined iconSize="xl" />}
                 label={t('Collapse tab content')}
                 onClick={handleDeleteTopLevelTabs}
@@ -566,6 +570,7 @@ const DashboardBuilder = () => {
       const filterBarWidth = dashboardFiltersOpen
         ? adjustedWidth
         : CLOSED_FILTER_BAR_WIDTH;
+      setCurrentFilterBarWidth(filterBarWidth);
       return (
         <FiltersPanel
           width={filterBarWidth}
@@ -614,7 +619,16 @@ const DashboardBuilder = () => {
             </ResizableSidebar>
           </>
         )}
-      <StyledHeader ref={headerRef}>
+      <StyledHeader
+        data-test="dashboard-header-wrapper"
+        ref={headerRef}
+        filterBarWidth={
+          showFilterBar &&
+          filterBarOrientation === FilterBarOrientation.Vertical
+            ? currentFilterBarWidth
+            : 0
+        }
+      >
         {/* @ts-ignore */}
         <Droppable
           data-test="top-level-tabs"