From 6a42f6c9698566b367f40ea0222b7b6d1e23dfd5 Mon Sep 17 00:00:00 2001 From: Kamy Date: Tue, 9 Apr 2024 13:06:21 -0400 Subject: [PATCH] fixt(footertabs): fix footer panel fullscreen height #closes1887 (#1940) --- .../src/core/components/common/use-footer-panel-height.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx b/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx index 7ff09b82dc7..eb1fdd1ae77 100644 --- a/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx +++ b/packages/geoview-core/src/core/components/common/use-footer-panel-height.tsx @@ -7,6 +7,7 @@ import { } from '@/core/stores/store-interface-and-intial-values/feature-info-state'; import { logger } from '@/core/utils/logger'; import { useDataTableStoreActions } from '@/core/stores/store-interface-and-intial-values/data-table-state'; +import { useGeoViewMapId } from '@/core/stores/geoview-store'; import { TABS } from '@/core/utils/constant'; interface UseFooterPanelHeightType { @@ -19,6 +20,7 @@ interface UseFooterPanelHeightType { * @returns list of ref objects that are attached to DOM. */ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightType) { + const mapId = useGeoViewMapId(); const leftPanelRef = useRef(null); const rightPanelRef = useRef(null); const panelTitleRef = useRef(null); @@ -38,8 +40,9 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp if (leftPanelRef.current && isMapFullScreen && (activeFooterBarTabId === footerPanelTab || footerPanelTab === 'default')) { const panelTitleHeight = panelTitleRef.current?.clientHeight ?? 0; - const tabsContainer = document.getElementById(`mapId-tabsContainer`)!; + const tabsContainer = document.getElementById(`${mapId}-tabsContainer`)!; const firstChild = tabsContainer?.firstElementChild?.firstElementChild; + const firstChildHeight = firstChild?.clientHeight ?? 0; const leftPanelHeight = (window.screen.height * footerPanelResizeValue) / 100 - panelTitleHeight - firstChildHeight; @@ -55,6 +58,7 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp rightPanelRef.current.style.paddingBottom = `24px`; } else { const rightPanel = (rightPanelRef.current?.firstElementChild ?? null) as HTMLElement | null; + if (rightPanel) { rightPanel.style.maxHeight = `${leftPanelHeight}px`; rightPanel.style.paddingBottom = `24px`; @@ -85,6 +89,7 @@ export function useFooterPanelHeight({ footerPanelTab }: UseFooterPanelHeightTyp arrayOfLayerData, allFeaturesLayerData, setTableHeight, + mapId, ]); return { leftPanelRef, rightPanelRef, panelTitleRef };