From fc4ef8313e2ca17184ee72bbbbf9c7852ab43786 Mon Sep 17 00:00:00 2001
From: Diego Medina <diegomedina24@gmail.com>
Date: Thu, 31 Mar 2022 15:04:34 -0300
Subject: [PATCH] fix: Dashboard Edit View Tab Headers Hidden when Dashboard
 Name is Long

---
 .../DashboardBuilder/DashboardBuilder.tsx     | 29 ++++++++++++++-----
 superset-frontend/src/dashboard/constants.ts  |  2 --
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index 4f7ef563ce55f..39cb2d0e5f501 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -18,7 +18,7 @@
  */
 /* eslint-env browser */
 import cx from 'classnames';
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useState, useMemo } from 'react';
 import { JsonObject, styled, css, t } from '@superset-ui/core';
 import { Global } from '@emotion/react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -56,10 +56,8 @@ import {
   CLOSED_FILTER_BAR_WIDTH,
   FILTER_BAR_HEADER_HEIGHT,
   FILTER_BAR_TABS_HEIGHT,
-  HEADER_HEIGHT,
   MAIN_HEADER_HEIGHT,
   OPEN_FILTER_BAR_WIDTH,
-  TABS_HEIGHT,
 } from 'src/dashboard/constants';
 import { shouldFocusTabs, getRootLevelTabsComponent } from './utils';
 import DashboardContainer from './DashboardContainer';
@@ -249,6 +247,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
     [dispatch],
   );
 
+  const headerRef = React.useRef<HTMLDivElement>(null);
   const dashboardRoot = dashboardLayout[DASHBOARD_ROOT_ID];
   const rootChildId = dashboardRoot?.children[0];
   const topLevelTabs =
@@ -261,10 +260,26 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
     uiConfig.hideTitle ||
     standaloneMode === DashboardStandaloneMode.HIDE_NAV_AND_TITLE ||
     isReport;
+  const [barTopOffset, setBarTopOffset] = useState(0);
 
-  const barTopOffset =
-    (hideDashboardHeader ? 0 : HEADER_HEIGHT) +
-    (topLevelTabs ? TABS_HEIGHT : 0);
+  useEffect(() => {
+    setBarTopOffset(headerRef.current?.getBoundingClientRect()?.height || 0);
+
+    let observer: ResizeObserver;
+    if (typeof global.ResizeObserver !== 'undefined' && headerRef.current) {
+      observer = new ResizeObserver(entries => {
+        setBarTopOffset(
+          current => entries?.[0]?.contentRect?.height || current,
+        );
+      });
+
+      observer.observe(headerRef.current);
+    }
+
+    return () => {
+      observer?.disconnect();
+    };
+  }, []);
 
   const {
     showDashboard,
@@ -361,7 +376,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
           </StickyPanel>
         </FiltersPanel>
       )}
-      <StyledHeader>
+      <StyledHeader ref={headerRef}>
         {/* @ts-ignore */}
         <DragDroppable
           data-test="top-level-tabs"
diff --git a/superset-frontend/src/dashboard/constants.ts b/superset-frontend/src/dashboard/constants.ts
index 169a2d09de192..296bc0a9b3bb3 100644
--- a/superset-frontend/src/dashboard/constants.ts
+++ b/superset-frontend/src/dashboard/constants.ts
@@ -35,8 +35,6 @@ export const PLACEHOLDER_DATASOURCE: Datasource = {
 };
 
 export const MAIN_HEADER_HEIGHT = 53;
-export const TABS_HEIGHT = 50;
-export const HEADER_HEIGHT = 72;
 export const CLOSED_FILTER_BAR_WIDTH = 32;
 export const OPEN_FILTER_BAR_WIDTH = 260;
 export const FILTER_BAR_HEADER_HEIGHT = 80;